VUE3组件通信

props： 只读，不能修改 defineProps()

实现父子组件通信。子组件给父组件传递值 ：model
vue3中采用组合式API，通过defineProps()这个函数来接收，可以是数组或者对象接收。

<script setup>
    let props = defineProps(['info']) //返回为一个代理数组
    console.log(props)
</script>

自定义事件：defineEmits()

vue3原生DOM事件无论放在标签还是组件，都原生DOM事件。
在子组件中通过defineEmits()来接收父组件传递的自定义事件。

    <template>
    // 触发一个update函数，
    // $emit('update'，'hh','12'),还可以传值，名为update函数，参数为hh, 12
        <button @click="$emit('update')">111</button>
    </template>
    <script>
        let $emit = defineEmits(['update'])
    </script>

但是在vue2中为自定义事件，子组件给父组件传递数据，通过.native实现将自定义事件改为原生DOM事件。

<template>
    <button>111</button>    
    <Child @click="update">
</template>
<script>
    import Child from './Child.vue'
</script>

全局事件总线：

mitt插件，需要用npm来下载，mitt为一个方法，返回一个bus对象。
emit送数据，触发事件；
on接受数据，接受兄弟组件传递的数据。

    // 生成一个bus对象，其中含有on,emit方法。
    import mitt from 'mitt'
    const $bus = mitt() 

v-model：

实现数据双向绑定。
若在vue3中实现数据双向绑定，可以利用props和自定义事件。
在vue3中可以直接在组件中使用v-model来实现双向数据绑定。
子组件中也要利用props和自定义事件（update：变量名）来接收参数。

useAttrs：

获取组件身上的属性和事件。获取到父组件给子组件传递的属性和事件。
子组件可以利用props接收

import {userAttrs} from 'vue'
let $attrs = userAttrs()
console.log($attrs) //可以获取到父组件给该组件传递的属性和属性值

// 也可以通过defineProps来接受
let props = defineProps(['title'])
//此时上面的$attrs中就没有title属性，说明defineProps优先级比userAttrs更高。

ref和$parent:

ref: 获取真实的DOM节点，获取到子组件实例VC;
$parent: 子组件内部获取到父组件的实例。

组件的内部数据是对外关闭的，别人不能访问。
如果想让外部访问需要通过defineExpose（）方法对外暴露。

provide和inject：

实现隔辈组件传递数据
provide（key值， 传递的数据） //祖辈 传递数据
inject（key值） //孙辈 接收数据

---

pinia：

类似于vuex， 集中式管理状态容器，实现组件之间的通信。
state, getters, actions

插槽：

默认插槽，具名插槽（v-solt）可以简写为#，作用域插槽（子组件可以将数据回传给父组件）。
父组件给子组件传递标签。

插槽可以内容在父组件模板中定义的，所以可以访问到父组件的作用域。

具名插槽 ： 父组件中用

<template v-slot:header>

</template>

子组件：

<slot name = "header"></slot>