对Vue组件通信的理解

组件通信的方式

父子通信

方式一:props

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

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

--html
<blog-post message="hello!"></blog-post>

--js
Vue.component('blog-post', {
 props: ['message'],
 template: '<h3>{{ message }}</h3>'
})

复制代码

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

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

string,

number,

booler,

object,

function

方式二:events

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

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
复制代码

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  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:`
    <div>
      <input @keyup="on_change" v-model="i_said">
    </div>   
  `,
  mothed:{
      on_change:function(){
          Event.$emit('aaa-said-somthing',this.i_said) //绑定事件,将aaa的输入数据作为第二个参数传递出去
      }
  }
  
  vue.component('bbb',{
  tempate:`
    <div>
     aaa说:{{aaa_said}}
    </div>   
  `,
  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: `
  <div>我是儿子
      <sunzi v-show="visible" @close="$emit('close')"></sunzi>
  </div>
`
})
Vue.component('sunzi', {
  template: `
  <div>我是孙子 
    <button @click="$emit('close')">关闭</button>
  </div>
`
})
new Vue({
  el: '#app',
  data: {
    message: '我是爷爷',
    xxx: false
  },
  methods:{
    log(){
      console.log('爷爷知道了')
    }
  }
})
复制代码

<div id="app">
    <p>{{ message }}</p>
    <button @click="xxx=true">打开</button>
    <child :visible="xxx" @close="xxx=false"></child>
  </div>
复制代码

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

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

转载于:https://juejin.im/post/5b82a82a51882542b366c3b4