本文主要解决vue组件之间的通信问题
Prop 向下传递，事件向上传递
Prop
（主要用于父组件向子组件下发数据）
- 子组件中显式地用 props选项声明它预期的数据：
// 子组件使用数据
<a href="/" :class="navActive === 'index' ? 'active' : ''">首页</a>
// props声明
export default {
data() { ... },
props: ['navActive', 'isZjrc']
...
}
- 父组件中传入数据
// 传入静态数据
<header-nav navActive="index"></header-nav>
// 传入动态值
<header-nav :navActive="navClassname"></header-nav>
事件
（主要用于子组件给父组件发送数据）
父子组件通信
- 在子组件中触发父组件的事件
<button @click="toParent">传值</button>
...
export default {
data() { ... },
methods: {
toParent() {
this.$emit('childToParentMsg', '子组件向父组件传值')
}
}
}
- 在父组件中监听事件
<header-nav navActive="index" @childToParentMsg="showMsg"></header-nav>
<h1>{{childMsg}}</h1>
// 事件绑定
export default {
data() {
return {
childMsg: ''
}
},
components: {
HeaderNav
},
methods: {
showMsg(msg) {
this.childMsg = msg
}
}
}
非父子组件通信
- 在组件A中监听事件
export default {
mounted() {
this.$on("showDialog", id => {
this.showDialog(id);
});
}
}
- 在组件B中触发A的事件
<apply-invoice ref="invoiceDialog"></apply-invoice>
export default {
mounted() {
this.$refs["invoiceDialog"].$emit("showDialog",this.customerId);
}
}
