【vue】组件通信

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

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

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

//父组件向子组件通信

  

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

数据验证：

以下是几个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)传递数据，示例如下：

//子组件向父组件通信

  
总数：{{ total }}
  

或者

//子组件向父组件通信

  
总数：{{ total }}
  

三、跨组件之间通信：

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

//跨组件之间通信

  {{ message }}