【Vue.js】之组件之间的通信

【Vue.js】组件之间的通信

1.父->子

通过属性传递

子组件中：

props: ['list'],
// 属性中的名称不能和data中的属性重名

父组件中：

<u-list :list="list"></u-list>

props需要限制属性的类型

props: {
    list: String  // 验证类型： Number String Boolean Array Object Function Symbol		
    age: [Number, String]   // 可以使用数字或字符串
 },

必传设置

required: true

默认值 [当父组件传递的数据全等于undefined时取默认值]

非引用类型

default: 0 // 默认值

引用类型

default () {
	return [1, 2, 3]
}

required和default不同时设置

自定义验证

validator (value) {
    // 参数value就是父组件传递过来的数据
    // 必须返回布尔型
    return value >= 0
}

子组件不能改变父组件传递进来的数据

2.子->父

使用事件传递

​ 在子组件触发事件

// this.$emit(事件名, 数据)
this.$emit('completed', this.item.id)

​ 在父组件响应事件

<!--响应子组件的事件 @子组件定义的事件-->
<u-input @add="addToList"></u-input>

组件默认都是响应自定义事件 使用事件修饰符.native才会触发JS的原生事件

3.非父子组件

同一个树形结构 , 通过间接传递

非父子组件直接通信

• 本地存储
• 总线机制

首先在main.js中创建总线

    // 创建通信的总线
    Vue.prototype.bus = new Vue()

然后在组件中通过总线触发事件

    this.bus.$emit('completed', this.item.id)

最后在需要数据的组件中响应事件

    // App.vue
    mounted () {
    //this.bus.$on(事件名, 处理函数)
        this.bus.$on('completed', (id) => {
          this.updateList(id)
        })
      },

• Vuex