vue3 组件传参

一、简介

        组件中经常使用到组件传参的方法。父子组件传参，通常使用 defineProps 和 defineEmits 进行传输。在兄弟组件传参的方法中，常见的方法有两种，第一种是用父组件作为桥梁，A组件先传给父组件，然后在用父传子的方法将数据传给B组件；第二种是使用 mitt 方法。

二、传参方法

父传子： defineProps

        1.在子组件点前中动态绑定需要传输的值：:addRolecontrol2="addRolecontrol" 等号左侧是子组件接收的参数名称，等号右边是父组件需要传输给子组件的值；

        2.子组件通过defineProps() 接收父组件传入的参数。defineProps() 可以写成对象形式，也可以写成数组形式：const props = defineProps(['addRolecontrol2']) 此时html可以直接使用父组件传递的参数：v-model="props.addRolecontrol2"

子传父：defineEmits

         1.子组件声明 const emits = defineEmits(['addRolecontrol3']) 。在需要给父组件传递参数的回调中使用声明的 emits() 函数。如图中取消添加回调时候，需要将dialog控制值变为false传给父组件，即：emits('addRolecontrol3', dialogShow.value) 。第一个参数是作为 defineEmits 参数数组中的其中一项（比如 const emits = defineEmits(['addRolecontrol3']) 中的 addRolecontrol3，申明后用于子组件标签中接收子组件传值的自定义事件名），第二个参数是需要传给父组件的值。

        2.父组件中，在子组件标签绑定回调函数，例如： @addRolecontrol3="addRolecontrol4" 。左边 addRolecontrol3 是自定义事件名称。右边 addRolecontrol4 是父组件中的回调函数名称，对应父组件中声明的函数，可用于接收子组件传递的值后直接使用并且要知道函数默认参数为子组件传递过来的参数。

父传子 -- 子传父

  补充：v-model 实现父子组件传值双向绑定

        同上案例，这里使用了 v-model 实现同一个值 addRolecontrol 在父子组件中实现双向绑定，同比节省了许多代码。总结是使用 v-model:addRolecontrol="addRolecontrol2" 替换掉了之前的 :addRolecontrol2 = 'addRolecontrol'  @addRolecontrol3 = 'addRolecontrol4'  

《==================================================》

使用mitt

先下载安装 mitt 

npm install mitt -S

新建一个文件，引入 mitt 调用并导出（这里我是将文件放在 utils 文件夹中）

import mitt from 'mitt'
const emit = mitt()
export default emit

组件A传递参数给组件B，组件A中的代码如下

组件A传递参数

 组件B接收A组件传递的参数，代码如下

组件B接收参数

        mitt.emit () 接收两个参数，第一个为名称，第二个为传递的参数。通过指定的名称，才能绑定对应的监听器。

        mitt.on () 也接收参数，第一个参数任然为名称，第二个参数为函数，函数的参数是 mitt.emit () 传递的参数。函数中接收到传递的参数可以按需要直接使用（如图将接收的参数赋值给  keyword ）

        除此之外，还有一个较常用的api  --  emitter.off("searchKeyword") --  移除订阅。里面的参数则是需要取消的事件名称。