Vue组件通信

最近在学习Vue,组件化后不同组件之间如何通信，记录一下。

• Vue中组件通信时，数据流只能由父级传递给子级，通过props，子级传递信息给父级，通过$emit。
• 只有父子间能直接通信，兄弟（同级）之间，爷孙（隔代）之间都不能直接传递信息，只能利用父子通信来传递。

父子组件

子组件接受父组件的数据时，通过定义props来实现。子组件对父组件传递信息时，通过事件来传递。如下面的示例

http://js.jirengu.com/zuzikasoxe/2/edit

  <div id="app">
    <child :title="message" @click-child="message2 += $event "></child>
    {{message2}}
  </div>

Vue.component('child',{
  props:['title'],
  data(){
    return{
      msg: '+child发出的数据',
    }
  },
  template:`<div>
      <hr><div>
      {{title}}<button @click="$emit('click-child',msg)">child</button>
      <hr>
  </div>
  `
})
let app = new Vue({
  el: "#app",
  data: {
    message: '父组件的一个数据',
    message2: 'Hello',
  },
})

父子组件通信

子组件中通过props中的title，绑定了父组件中的message，实现了数据传递。而通过$emit()将点击事件通知了父组件，实现了父子之间的通信。

爷孙通信

爷爷和孙子是不能直接通信的，只能通过爷爷传给儿子，儿子传给孙子。孙子传给儿子，儿子传给爷爷这样进行通信。

http://js.jirengu.com/jaquhoseqo/3/edit

  <div id="app">
    {{message2}}
    <child :title="message" @click-add="message2 += $event" @click-grand-add="message2 += $event"></child>
  </div>

Vue.component('child', {
  props: ['title'],
  data() {
    return {
      msg: '+child发出的数据',
    }
  },
  template: `
  <div>
      <hr>
      {{title}}
      <button @click="$emit('click-add',msg)">child++</button>
      <grand-son :tit="title" @click-grand-add="$emit('click-grand-add',$event)"></grand-son>
  </div>
  `
})

Vue.component('grand-son', {
  props: ['tit'],
  data() {
    return {
      msg: '+grandSon发出的数据',
    }
  },
  template: `
  <div>
    <hr>
    {{tit}}
    <button @click="$emit('click-grand-add',msg)">grandSon++</button>
  </div>
  `
})

let app = new Vue({
  el: "#app",
  data: {
    message: '父组件的一个数据',
    message2: 'Hello',
  },
})

爷孙组件的通信.png

儿子通过props得到爷爷的数据，孙子再通过props得到儿子的数据，进而得到爷爷的数据。孙子发出数据时，$emit首先通知到儿子，再通知到爷爷，最后爷爷进行相应操作。

兄弟（同级）组件间通信

定义一个公共的vue实例，一个组件传递数据时，向这个实例发送$emit通知，另一个组建用这个实例监听事件，进行相应的操作。

https://jsfiddle.net/50wL7mdz/527445/

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{message}}
  <child></child>
  <child2></child2>
</div>

let bus = new Vue()

Vue.component('child', {
  props: ['title'],
  template: `
  <div>
      <hr>这里是child1
      <button @click="fn">关闭button2</button>
  </div>
  `,
  methods: {
    fn(){
        bus.$emit('click-child','child1想关闭child2')
    }
  }
})

Vue.component('child2', {
  props: ['title'],
  data() {
    return {
      msg: '这里是child2',
    }
  },
  created: function() {
    bus.$on('click-child',this.fn)
  },
  methods: {
    fn(value){
        this.msg += value
    }
  },
  template: `
  <div>
      <hr>{{msg}}
      <button>button2</button>
  </div>
  `
})

let app = new Vue({
  el: "#app",
  data: {
    message: 'Hello',
  },
})

兄弟组件通信

这段代码中bus就是一个公共的容器，使同级的兄弟组件中进行通信。