大白话Vue2.x-组件间通讯

2017-07-17 本文已影响142人锋子锅锅

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件意味着协同工作，组件与组件的通讯是必然的，那么vue的组件间通讯是怎么样的呢？

父子组件通讯

通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

vm.$parent

父实例，如果当前实例有的话。

子组件可以通过$parent访问父组件的数据；

栗子


//假设父组件有一个message
data(){
    return {
        message: 'hello'
    }
}

Vue.component('child', {
  template: '<span>{{ this.$parent.message }}</span>'
})

<!-- 渲染结果 -->
<span>hello</span>

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

prop

组件的实例的独立存在，所以子组件是无法直接访问父组件的实例。子组件通过props来获取父组件传递的数据。

官方栗子

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: '<span>{{ message }}</span>'
})

父组件

<child message="hello!"></child>

这里需要注意两点

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

简单的说就是我们在子组件不应该去改变prop的数据，即使我们可以传递数组或对象作为prop，进而改变数据去改变父组件！

如何正确利用prop

正常情况下，子组件需要获取prop通常有三种原因：

prop 作为初始值传入后，子组件仅作为展示数据使用；
prop 作为初始值传入后，子组件想把它当作局部数据来用；
prop 作为初始值传入，由子组件处理成其它数据输出；

下面是三种情况的正确的打开方式

// 1、 prop 作为初始值传入后，直接渲染
Vue.component('child', {
    props: ['initialCounter'],
    template: '<span>{{ initialCounter }}</span>'
})

// 2、 定义一个局部变量，并用 prop 的值初始化它：
Vue.component('child', {
    props: ['initialCounter'],
    data: function () {
        return { counter: this.initialCounter }
    }
})

// 3、 定义一个计算属性，处理 prop 的值并返回。
Vue.component('child', {
    props: ['initialCounter'],
    data: function () {
        return { counter: this.initialCounter }
    }
})

上面的的方式都是有官方提供，但是对于第二种方式我并不完全认同！正如前面提到的注意点（在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态），即使用prop初始化了一个局部变量，如果这个prop是对象或者数据，那么这个局部变量与prop仍然指向同一个内存空间！

下面的结果就是通过定义一个局部变量，并用 prop 的值（object）初始化它，然后修改局部变量的结果：

props
在线演示

tips：如果需要将prop作为局部变量使用，又不希望影响父组件，那么可以使用深克隆的方法进行赋值。最简单的方法是JSON.parse(JSON.stringify(value));,深克隆后，无论是对象还是数组都不会再指向同一个内存空间，它们将是独立的存在。结果如下：

结果
在线演示

自定义事件

在父子组件中，子组件是通用过自定义事件来把数据传回给父组件。

每个 Vue 实例都实现了事件接口 (Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

子组件通过$emit来向上触发父组件的事件；
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定

也就是说在父子组件中，父组件必须在模板中对子组件使用'v-on'绑定事件，否则无法监听到子组件通过$emit抛出的事件

官方栗子

<div id="counter-event-example">
  <p>{{ total }}</p>
  //必须使用v-on绑定自定义事件
  <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
      //触发父组件的incrementTotal事件
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

.sync 修饰符

.sync 修饰符，它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。

也就是说使用.sync，相当于把父组件需要做的事情都隐式的做完了，子组件想要改变父组件的数据，只需要通过$emit来触发就可以了。

例如下面这个：

<button-counter :counter.sync="total"></button-counter>

会被隐式的拓展为

<button-counter :counter="total" @update:counter="val => total = val"></button-counter>

完整的栗子

<div id="counter-event-example">
  <button-counter counter.sync="total"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  props:['counter']
  data: function () {
    return {
      myCounter: this.counter
    }
  },
  methods: {
    increment: function () {
      this.myCounter += 1
      this.$emit('update:counter', this.myCounter)
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  }
})

这个栗子跟自定义事件的官方栗子是一样的效果。

非父子组件通讯

两个非父子组件通讯，可以使用一个空的vue实例来做事件总线，在这个实例上定义和监听自定义事件。

栗子

//空的Vue实例作为事件总线
var eventBus = new Vue({});

//componenta 组件
var componenta = {
    template: '<div><p>componenta接收到的信息是： <span class="myclass" v-text="text"></span></p><input v-model="sendData"></input><button @click="sendMessage">send to b</button></div>',
    data: function() {
        return {
            sendData: '',
            text: ''
        }
    },
    methods: {
        sendMessage: function() {
            // 触发事件
            eventBus.$emit('sendToB', this.sendData)    
        }
    },
    mounted: function() {
        eventBus.$on('sendToA', (data)=> {
            this.text = data
        }) 
    }
}