【vue】组件通信

vue中组件通信主要有三种形式：
1、父组件向子组件通信。
2、子组件向父组件通信。
3、跨组件之间通信也称兄弟组件之间通信。

一、父组件向子组件通信：

父组件向子组件通信使用props传递数据，示例如下：

//父组件向子组件通信
<div  id='app'>
  <my-component message='来自父组件的数据'></my-component>
</div>
<script>
  Vue.component('my-component', {
    props: ['message'],
    template: '<div>{{ message }}</div>'
  });

  var app = new Vue({
    el: '#app'
  })
</script>

一般当组件需要提供给别人使用时，推荐都进行数据验证。

数据验证：

以下是几个prop的示例：

//数据验证
Vue.component('my-component', {
  props: {
    //必须是数字类型
    propA: Number,
    //必须是字符串或数字类型
    propB: [String, Number],
    //布尔值，如果没有定义，默认值就是true
    propC: {
      type: Boolean,
      default: true
    },
    //数字，而且是必传
    propD: {
      type: Number,
      required: true
    },
    //如果是数组或对象，默认值必须是一个函数来返回
    propE: {
      type: Array,
      default: function() {
        return [];
      }
    },
    //自定义一个验证函数
    propF: {
      validator: function(value) {
        return value > 10;
      }
    }
  }
});

二、子组件向父组件通信：

子组件向父组件通信使用this.$emit(key, value)传递数据，示例如下：

//子组件向父组件通信
<div id='app'>
  <p>总数：{{ total }}</p>
  <my-component v-model='total'></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: '<button @click="handleClick">+1</button>',
    data: function() {
      return {
        counter: 0
      }
    },
    methods: {
      handleClick: function() {
        this.counter++;
        this.$emit('input', this.counter);
      }
    }
  });

  var app = new Vue({
    el: '#app',
    data: {
      total: 0
    }
  });
</script>

或者

//子组件向父组件通信
<div id='app'>
  <p>总数：{{ total }}</p>
  <my-component @input='getCurrentCounter'></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: '<button @click="handleClick">+1</button>',
    data: function() {
      return {
        counter: 0
      }
    },
    methods: {
      handleClick: function() {
        this.counter++;
        this.$emit('input', this.counter);
      }
    }
  });

  var app = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    methods: {
      getCurrentCounter: function(val) {
         this.total = val;
      }
    }
  });
</script>

三、跨组件之间通信：

跨组件之间通信使用中央事件总线（bus）传递数据，示例如下：

//跨组件之间通信
<div id='app'>
  {{ message }}
  <component-a></component-a>
</div>
<script>
  var bus = new Vue();

  Vue.component('component-a', {
    template: '<button @click="handleEvent">传递事件</button>',
    methods: {
      handleEvent: function() {
        bus.$emit('on-message', '来自组件component-a的内容');
      }
    }
  });

  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    },
    mounted: function() {
      var _this = this;
      //在实例初始化时，监听来自bus实例的事件
      bus.$on('on-message', function(msg) {
        _this.message = msg;
      });
    }
  });
</script>