vue3(一)----vue3中的组件通信方式|v-model——|ref函数获取dom节点

1.prop写法，父组件传是一样的。

接收不一样。
使用definePorps’
数组对象写法都可以

1.带有默认值的defineProps

2.配合PropType和ts使用——类型断言

3.withDefaults（带默认值）

4.ts配合泛型

2.自定义事件 父组件传入不变，还是接收变化。

defineEmits()

1.defineEmits数组写法

2.defineEmits搭配ts类型

3.自定义事件传回的参数和普通参数的使用

$event代表子组件传过来的数据.

4.v-model的用法变化

1.vue2中在组件上使用v-model

在组件上使用v-model相当于绑定属性名为value的prop和自定义事件input

如果想将属性或事件名称改变为其他名称，则需要在子组件中添加model选项。

2.:title.sync

相当于绑定了属性名为title的prop以及自定义事件update:title

3.vue3中的v-model

相当于绑定了属性名为modelValue的prop，以及绑定了update：modelValue的自定义事件

4.vue3中的model如果需要修改prop的名字

相当于sync的替代

5.ref函数获取dom节点

在Vue3中，可以使用ref函数来获取DOM节点。ref函数可以用于多种类型的元素，包括普通的HTML元素、组件实例、以及其他自定义对象。

在上面的示例中，我们使用ref函数来创建一个myParagraph引用，然后将其绑定到

元素上。在onMounted钩子函数中，我们可以通过myParagraph.value来访问DOM节点。

6.自定义事件与vue2的区别 （.native的取消）

如果defineEmits接受了click，则click为自定义事件。否则，，默认为原生事件

7.vue3中如何使用全局事件总线

使用插件mitt

8.useAttrs 获取属性和事件

可以接收传的属性和事件（包括自定义事件和原生事件。） 这点在vue2里的$attrs不同，vue2中只能接收属性。

如果props接收了，则attrs就不见。（props的优先级较高）

9.ref和$parent 以及defineExpose

但是ref和$parent是无法获取组件内的数据的。所以需要defineExpose暴露。

10.inject和provide

祖辈组件

后代组件

后代组件可以对数据进行修改。同时父辈组件的数据也会发生变化。

11.pinia或vuex

12.插槽

1.默认插槽
2.具名插槽
v-slot:的简写形式#

3.作用域插槽
在父组件传入数组数据，子组件渲染。在slot中传入数据，回传到父组件中。再由父组件使用插槽拿到回传的数据回显在结构上。