vue组件间的通信

父传子

vue2中

子组件接收的数据可以直接在模板和代码中使用

 //  父组件传递数据 
 <子组件标签  :自定义属性="传递的变量">

 // 子组件接收
    // 简单方式 
        props:['自定义属性名']

    // 复杂方式  
        props:{ 自定义属性名:{type:类型 ,required:是否必须(布尔值),default:默认值 } }

vue3中

子组件接收的数据可以直接在模板中使用，setup中使用需要通过setup的第一个参数

props:['自定义属性名'],
setup(props){
// 具有响应式
	console.log(props.自定义属性名)
}

子传父

vue2中

// 父组件
    <子组件标签  @自定义事件="回调函数">
        
      回调函数(val){
       // val 子组件传回的数据
     }

// 子组件
    // 函数中使用   $emit 会触发父组件的自定义事件
    this.$emit('父组件自定义事件名',传递的参数)

vue3中

// 父组件 接收时相同
// 子组件 

setup(props,{emit}){
	emit('父组件自定义事件名',传递的参数)
}

v-model在组件间使用

v-model是一个语法糖，其原理相当于父子组件间的通信

vue2中

在vue2中一个子组件只能绑定一个v-model

// 父组件的子组件标签

<com1 v-model="num"></com1>
 
// 等价于 父组件给子组件传递一个名为 value 的值
// 父组件接收了一个子组件传来的名为input的事件

<com1 :value="num" @input="(val)=>this.num=val"></com1>

vue3中

在vue3中 一个子组件可以绑定多个v-model ，原因是vue3中v-model把vue2中的 .sync修饰符和

v-model集到了一起

<Son v-model="msg" />
<!-- 传入了modelValue 属性   接收update:modelValue事件 -->  
<Son :modelValue="msg"  @update:modelValue="val=>msg=val"/>

// 多个v-model

<Son v-model:xxx="msg"/>
<!-- 传入了xxx 属性   接收update:xxx事件 --> 
<Son :xxx="msg"  @update:xxx="val=>msg=val"/>

eventBus 事件总线

在main.js 中全局注册

Vue.prototype.$eventBus = new Vue()
// $on 发布事件

this.$eventBus.$on('事件名',function(参数1,参数2)){
                   
                   }
// $emit 接收

this.$eventBus.$emit('事件名',参数1,参数2)