vue组件间的通信可以分为:
- 父子组件之间的通信;
- 非父子组件之间的通信。
一、父子组件间的通信:
1. 父组件向子组件传值。
父组件向子组件传值:
<parent>
<child :msg="msg"></child>
</parent>
data(){
return {
msg: [1,2,3]
};
}
子组件通过props来接收数据(以下三种方式都可以)
props: {
msg: Array
}
props: ['msg']
props: {
msg: {
type: Array,
default: [0,0,0] //这样可以指定默认的值
}
}
2. 子组件想父组件传值。
通过$emit来触发,$on来监听变化。
子组件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe');
}
}
<div>
<child @upup="change" :msg="msg"></child>
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
3. 非父子组件之间传值
可以通过创建一个eventHub事件中心,来实现。
第一步创建事件中心: let Hub= new Vue();
第二步触发:Hub.$emit('change',value);
第三步接收: Hub.$on('change',(value) => {
this.msg = value;
})
4. 复杂的网站直接传值可以使用vuex来实现传值,简单的就没有必要,否则只能增加代码的冗余度。
要使用vuex必须要在你的项目中引用,
第一步:npm install vuex --save;
第二步:import Vuex from 'vuex'
Vue.use(Vuex);
第三步:export default new Vuex.Store({})。
当然也可以使用全局script标签引用vuex,这样就不需要上述步骤啦。