对Vue组件通信的理解-白红宇

组件通信的方式

父子通信

方式一:props

上图可以理解为两个过程:

1.pass props是父=>子传递数据,这个过程中props作为一个载体,将自定义的一些特性传递给子组件.

--html
    --jsVue.component('blog-post', { props: ['message'], template: '{
    { message }}
'})复制代码

父级 prop 的更新会向下流动到子组件中,e官方文档中称为单向数据绑定,这个过程中,子组件只能单向的获取到父级定义的值, 父组件修改数据之后,子组件中的props也会跟这刷新为最新的值.

props 可以接受任何类型的值传递到子组件,包括:

string,

number,

booler,

object,

function

方式二:events

组件自定义事件，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件


      
     {
   { total }}
  
       
     
    
复制代码

Vue.component('button-counter', {  template: '',  data: function () {    return {      counter: 0    }  },  methods: {    increment: function () {      this.counter += 1      this.$emit('increment')    }  },})new Vue({  el: '#counter-event-example',  data: {    total: 0  },  methods: {    incrementTotal: function () {      this.total += 1    }  }})复制代码

兄弟通信

两个平级的组件之间需要通信传递一些事件,则需要我们创建一个第三方Vue实例,来承载双方通信时所要进行的事件.

var Event=new Vue()  //作为第三方记录事件vue.component('aaa',{data(){    return{        i_said:'',    }}  tempate:`    
          
         
    
     `,  mothed:{      on_change:function(){          Event.$emit('aaa-said-somthing',this.i_said) //绑定事件,将aaa的输入数据作为第二个参数传递出去      }  }    vue.component('bbb',{  tempate:`    
    
          aaa说:{
   {aaa_said}}    
    
     `,  data(){      return{          aaa_said:'',      },      mounted:funtion(){      var me = this          Event.$on('aaa_said',function(data){              this.aaa_said=data          })      }  }})复制代码

兄弟通信的核心就在于拥有一个第三方调度器,通过它进行任意组件之间的通信.

爷孙通信

Vue.component('child', {  props: ['visible'],  template: `  
    
     我是儿子      
       
    
`})Vue.component('sunzi', {  template: `  
    
     我是孙子     
       
    
`})new Vue({  el: '#app',  data: {    message: '我是爷爷',    xxx: false  },  methods:{    log(){      console.log('爷爷知道了')    }  }})复制代码


        
     {
   { message }}
    
         
       
    
复制代码

这里爷孙之间的通信,只要依靠的是子组件的props,

严格意义上来讲，没有爷孙通信，只有父子通信，因为爷孙祖辈通信，都可以看成是父子通信。直接使用props和$emit并不能直接通信，但是爷爷可以和儿子通信，儿子可以和孙子通信，那么可以把儿子当作中转。