组件之间的数据共享
父->子
使用自定义属性props(props在子组件中)
子->父
使用自定义事件
子写自定义事件并传入数据,父亲使用子组件绑定自定义事件并用事件对应的函数接收数据
兄弟组件
vue2中使用EventBus
- 创建eventBus.js模块,并向外共享一个Vue的实例对象
- 在数据发送方,调用**bus.$emit(‘事件名称’,要发送的数据)**方法触发自定义事件
- 在数据接收方,调用**bus.$on(‘事件名称’,事件处理函数)**方法注册一个自定义函数
个体理解:相当于在二者之间创建了一个共享的Vue实例,在两个组件都被命名为了bus。之后的操作同子->父一样,先在发送方创建自定义事件,接收方直接使用bus实例.$on绑定事件,回调函数接收结果。
bus总线注意:因为bus在总线,所以on接收的时间要比emit的时间早,不然会接受不到数据。可以通过延迟emit的生命周期或使用this.$nextTick(()=>this.$bus.#emit)
父子双向同步
- 父绑定数据
- 父传入子,子绑定数据(实现父变子变)
- 子触发input,传出自定义事件input以及输入框的值
- 父监听input事件,将传来的值赋给绑定的值(实现子变父变)
<custom-input v-model="searchText"></custom-input>
// 等同于
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
注意:在单选框、复选框等类型的输入控件中可能会将value属性用于不同的目的,因此使用model选项来避免这样的冲突。
// 父组件
<base-checkbox v-model="lovingVue"></base-checkbox>
// 子组件
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
lovingVue的值将会传入名为checked的prop
.sync
//父组件给子组件传入一个函数
<MyFooter :age="age" @setAge="(res)=> age = res">
</MyFooter>
//子组件通过调用这个函数来实现修改父组件的状态。
mounted () {
console.log(this.$emit('setAge',1234567));
}
// 其实就是v-model的实现
我们优化一下
//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
mounted () {
console.log(this.$emit('update:age',1234567));
}
// 子传父的时候触发update:属性,新值
// 父组件直接属性.sync接受
sync修饰符在一个组件中可以多次使用,但在vue2中v-model只能使用一次