Vue2组件通信

Vue2 组件通信

一、父组件给子组件通信

1. 父组件给子组件传值

   props

   <template> 
     <div id="app">
       <h2>父组件</h2>
       <ChildOne  :msg="str" />
     </div>
   </template>
   

   export default {
     name: 'ChildTwo',
     props: {
       msg: {
         type: String,
         default: ''
       }
     }
   }
   

2. 父组件调用子组件的方法

   $refs（获取子组件实例，类似获取dom，需要给子组件添加ref属性）

   //父组件中个子组件添加ref属性
   <template>
     <div id="app">
       <h2>父组件</h2>
       <ChildOne ref="one" />
     </div>
   </template>
   

   //父组件使用this.$refs获得子组件实例并调用其方法
   this.$refs.one.hello()
   

二、子组件给父组件通信

1. 子组件给父组件传参 $emit

   <!--用v-on指令给子组件添加自定义事件-->
   <template>
     <div id="app">
       <h2>父组件</h2>
       <ChildOne @father="father" />
     </div>
   </template>
   //父组件定义的方法
     methods:{
       father(params){
         console.log(params)
       }
     }
   

   //子组件使用$emit
   this.$emit('father','子嘿嘿嘿')
   

2. 子组件调用父组件的方法 $parent(获取父组件实例，类似获取dom)

   //不推荐使用，不易维护this.$parent可以直接活得父组件实例，从而使用父组件方法
   this.$parent.father()
   

3. 父子组件间的双向数据绑定 :.sync 允许子组件修改props 同步改变子组件

   <!--使用了.sync使得子组件修改props，父组件传递给子组件的data也会改变-->
   <ChildOne :msg.sync ="str" />
   
   

三、非父子组件通信

1. 兄弟组件通信 $emit 和 props

   //$emit 子组件给父组件传参通信，props父组件给子组件传值通信方式结合
   

2. 非兄弟组件通信 中央事件总线$EventBus

   //任意组件使用$on注册监听A事件
   this.$EventBus.$on('A',()=>{})//
   //其他组件就可以使用$emit触发A事件
   this.$EventBus.$emit('A')