vue系列之组件通信

2016-12-26

摘要：vue2 中组件之间传递信息，记得要先引入 vue.js

父子组件通信

方法一：传递一个对象或数组。对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

<div id="box1">
  <div>父组件：<input type="text" v-model="message.a"></div>
  <componenta :my-message="message"></componenta>
</div>
<script>
  Vue.component('componenta', {
    props: ['myMessage'],
    template: '<div>子组件：<input v-model="myMessage.a"></div>'
  });
  new Vue({
    el: '#box1',
    data: {
      message: {a: '更改我试试'}
    }
  });
</script>

方法二：使用事件接口。$on(eventName)监听事件，$emit(eventName)触发事件。父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件

<div id="box2">
  <div>父组件值：{{num}}</div>
  <componentb :my-message="num" @change="ags"></componentb>
</div>
<script>
  Vue.component('componentb', {
    props:['myMessage'],
    template: '<div>子组件值：{{myMessage}} <button @click="change">点我+1</button></div>',
    methods: {
      change() {
        this.$emit('change');
      }
    }
  });
  new Vue({
    el: '#box2',
    data: {
      num: 0
    },
    methods: {
      ags() {
        this.num++;
      }
    }
  });
</script>

非父子组件通信

简单的场景下，使用一个空的Vue实例作为中央事件总线，复杂的请使用vuex

<div id="box3">
  <componentc></componentc>
  <componentd></componentd>
</div>
<script>
  var Event = new Vue();
  var C = {
    template: '<div>我是c <button @click="send">点我给d发送信息</button> {{message}}</div>',
    data() {
      return {message: "c的信息"}
    },
    methods: {
      send() {
        Event.$emit('msg', this.message);
      }
    }
  };
  var D = {
    template: '<div>我是d，我要接受c发送的信息->{{msg}}</div>',
    data() {
        return {msg:''}
    },
    mounted() {
      Event.$on('msg', function(value) {
        this.msg = value;
      }.bind(this)); // this由指向Event改为指向D
    }
  };
  new Vue({
    el: '#box3',
    components: {
      'componentc': C,
      'componentd': D
    }
  });
</script>