1、$emit/props(父子组件)
在父组件中,引用子组件,并将子组件需要的name属性传递过去。
<Son :name="name"></Son>
在子组件中通过props进行接收。父组件传过来的值是不允许修改的,想要修改必须通知父组件,让父组件来改
props: ['name']
在子组件中通过$emit方法,来触发一个名为‘send’的方法,并将参数传递过去。
send() {
this.$emit('send', '收到名字');
}
在父组件中将‘send’绑定一个方法get
<Son :name="name" @send="get"></Son>
通过get方法将父组件中传递过来的数据得到。
get(name) {
this.sonName = name;
}
2、ref与 $parent / $children(父子组件)
在父组件中通过ref来获取子组件,并可以获取子组件中的属性。
<Son ref="son" :name="name" @send="get"></Son>
getChild() {
console.log(this.$refs.son.age);
}
在父组件中通过$children来访问子组件,并可以获取子组件中的属性。
getChild() {
console.log(this.$children[0].age);
}
在子组件中通过$parent来访问父组件中的属性和方法。
send() {
this.$parent.name = '李四';
console.log(this.$parent);
// this.$emit('send', '收到名字');
}
3、事件总线EventBus(父子、兄弟、隔代组件)
利用vue的 $on 和 $emit 方法,完成事件的收集与触发。首先新建一个Vue实例。
// MyEven.js
import Vue from 'vue';
const vm = new Vue();
export default vm;
在需要收到信息的组件中,通过$on方法完成事件的收集
MyEvent.$on('send', (arg)=>{
console.log(arg);
})
在需要触发事件的组件中,通过$emit方法来完成事件的触发。
MyEvent.$emit('send', '收到名字');
4、$attrs / $listeners (隔代组件)
$attrs可以在子组件中获取父作用域中,不被prop所识别的属性和方法(class/style除外)
console.log(this.$attrs);
$listeners可以在子组件中获取父作用域中,所有通过v-on绑定的事件。
// 父组件
<Son ref="son" :name="name" @send="get"></Son>
// 子组件
this.$listeners.send(12341234) // 会触发父组件中的get方法
之所以主要用于隔代组件是因为可以通过
v-bind='$attrs'
v-on='$listeners'
将属性和方法传递到孙子组件中。
5、provide/inject(隔代组件)
在父组件中提供属性。
provide() {
return {
message: this.name
}
},
在孙子组件中完成依赖注入
inject: ['message'],
6、Vuex (任何组件)
最后是强大的Vuex,可以在任何组件间进行通信。
const store = new Vuex.Store({
// 数据存放
state: {
age: 10
},
// 修改数据的方法
mutations: {
modifyAge(state, payload) {
state.age = payload.age;
}
},
// 全局的计算属性
getters: {
tenYearsOld(state){
return state.age + 10;
}
},
//处理所有异步逻辑
actions: {
}
});