Vue3 + TypeScript学习

Vue3 + TypeScript学习3

- [Study_21 StoreToRefs（读数据）](#Study_21 StoreToRefs（读数据）)
- [Study_22 使用getters](#Study_22 使用getters)
- [Study_23 Subscribe订阅](#Study_23 Subscribe订阅)
- [Study_24 Store的组合写法](#Study_24 Store的组合写法)
- [Study_25 组件通信props](#Study_25 组件通信props)
- - （一）父传子：
  - （二）子传给父亲：
- [Study_26 自定义事件（典型的用于子传父的）](#Study_26 自定义事件（典型的用于子传父的）)
- [Study_27 Pubsub、 $bus、mitt](#Study_27 Pubsub、$ bus、mitt)
- [Study_28 v-model组件通信](#Study_28 v-model组件通信)
- [Study_29 $attrs祖给孙传值](#Study_29$ attrs祖给孙传值)
- [Study_30 refs、 $parent、Ref](#Study_30 refs、$ parent、Ref)

Study_21 StoreToRefs（读数据）

问题：读取数据时太繁杂了，我想改成下面这种

（1）此时：

结果发现如此行事会丢失了响应式

（2）因此第二种方式：

但是此刻把store中的所用东西都变成响应式了，使用起来代价大

（3）由此：第三种方式

引入

使用：使用countStore，得到一个专门存放count相关的store

Study_22 使用getters

类似于计算属性，他在store中可以直接拿到state中的数值，进行操作

也可以不用state，直接通过this来拿

因此bigSum可以直接写为箭头函数

Study_23 Subscribe订阅

Subscribe订阅，监视vuex中的数据修改

在组件.vue文件中

在store->ts文件中

Study_24 Store的组合写法

在store中，最开始的写法

组合式写法：

Study_25 组件通信props

组件通信Props，在Study_16有详细的

（一）父传子：

在父组件中（记得在script中引入child组件）

typescript 复制代码

  <Child :car="car"> 这是传给子组件值

在子组件中

typescript 复制代码

使用<h4>父传来的car：{{car}}</h4>
<Script>
   defineProps(["car"])
</Script>

（二）子传给父亲：

需要现在父亲中定义一个接收传值的方式

typescript 复制代码

Function getToy(value){
	Console.log("传来的toy值",value)
}
<Child :car="car" :sendToy="getToy">

在子组件中接收：

（写法1）

typescript 复制代码

<Script>
//需要先把这个接收并保存
Let props = defineProps(["car","sendToy"])
Function fasong(){
  Console.log(props.sendToy)
}
</Script>
<button @click="fasong">传玩具的值给父亲</button>

（写法2）

typescript 复制代码

<Script>
//需要先把这个接收并保存
defineProps(["car","sendToy"])
</Script>
//记得把子组件定义的这个toy值传递一下sendToy(toy)
<button @click=" sendToy(toy)">传玩具的值给父亲</button>

Study_26 自定义事件（典型的用于子传父的）

自定义事件（典型的用于子传父的）

父组件中：

1.(想在传递参数的同时，也要传事件对象$event过去)

typescript 复制代码

<button @click="test(6,7,$event)">点击</button>
Function test(a:number,b:number,c:Event){
  Console.log('test',a,b)
}

自定义事件学习
在父组件中使用这个自定义事件（绑定）

typescript 复制代码

<Child @haha="xyz" />
Function  xyz(value:number){
  Console.log("haha自定义事件被调用了"，value)
}

如何触发：

在子组件中声明

typescript 复制代码

 Const emit = defineEmits(["haha"])
//在组件被挂载3s后出发这个haha
onMounted(()=>{
	setTimeout(()=>{
	emit("haha")
	},3000)
})

这个emit("haha")可以写在任何地方

还比如，可以传参数来

typescript 复制代码

<button @click=" emit("haha"，666)">点击</button>

Study_27 Pubsub、$bus、mitt

接收数据的：提前绑好事件（提前订阅消息）

提供数据的：在合适的时候触发事件（发布消息）

Mitt可以实现任何组件之间的通信

第一步：安装npm i mitt

第二步：新建文件emitters

在main.ts中进行引入

之后便可以在emitter.ts中进行触发了

使用emitters实现组件之间的通信

子组件1将数据提供给子组件2

提供数据：子组件1（触发）

接收数据：子组件2（只要接收数据就必定会绑定事件）

步骤1

在组件2中绑定事件

在组件1中触发事件

此时便可以在组件2中使用组件1中的数据了

组件2是接收数据，组件1是传递数据

注意：

在组建被卸载的时候解绑事件，可以减小对内存的占用（记得引入onUnmounted）

Study_28 v-model组件通信

v-model在实际开发中，不会真正自己使用v-mode往上面编写v-model

UI组件库大量使用v-model进行双向绑定

v-model用在HTML标签上：

下面两个写法都可以实现双向绑定

v-model用在组件标签上：

在父组件中使用子组件

有两种使用方法：

（1）：

（2）：

在vue2中使用的是value和input事件

其实写法1就相当于写法2，当写了1之后，UI组件库会自动将写法1解析为写法2的形式

在子组件中：

接收value并触发事件

$event是什么？什么时候.target？

对于原生事件， e v e n t 就是事件对象，可以 . t a r g e t 对于自定义事件， event就是事件对象，可以.target 对于自定义事件， event就是事件对象，可以.target对于自定义事件，event就是触发事件时所传递的数据，不能.target

修改modelValue

typescript 复制代码

<!-- 修改modelValue，此处的yonghuming代表modelValue的重新命名的值，在子组件中，将所有时modelValue的地方改成yonghuming即可，因此便可以实现一个框绑定多个事件了 -->
<input type="text" v-model:yonghuming="username">

typescript 复制代码

<input type="text" v-model:yonghuming="username">

Study_29 $attrs祖给孙传值

$attrs祖给孙传值（会打扰到中间人），但是provide和inject不会

父组件--->子组件

当父组件给子组件传了值，但是子组件并没有声明接受，没有被声明接收的将会被存储在attrs中，被声明接收了的存在props中

typescript 复制代码

<Child :a='a' :b='b' :c='c' :d='d' v-bind='{x:100,y:200}' />

另一种写法：

子组件-->孙组件

一种孙传祖（孙-->祖）

Study_30 refs、$parent、Ref

$refs：父传子

$parent：子传父

Ref实现父传子的修改

$refs：想要一次搞进来很多子组件的数据

可以拿到所有子组件的数据

父传子