Vue3 + TypeScript学习

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组件）

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

在子组件中

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

（二）子传给父亲：

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

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

在子组件中接收：
（写法1）

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

（写法2）

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

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

自定义事件（典型的用于子传父的）
父组件中：
1.(想在传递参数的同时，也要传事件对象$event过去)

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

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

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

如何触发：
在子组件中声明

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

这个emit(“haha”)可以写在任何地方
还比如，可以传参数来

<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？

对于原生事件，$event就是事件对象，可以.target对于自定义事件，$event就是触发事件时所传递的数据，不能.target
修改modelValue

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

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

Study_29 $attrs祖给孙传值

$attrs祖给孙传值（会打扰到中间人），但是provide和inject不会
父组件—>子组件
当父组件给子组件传了值，但是子组件并没有声明接受，没有被声明接收的将会被存储在attrs中，被声明接收了的存在props中

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

另一种写法：

子组件–>孙组件

一种孙传祖（孙–>祖）

Study_30 refs、$parent、Ref

$refs：父传子
$parent：子传父
Ref实现父传子的修改

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

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

父传子