本篇文章给大家详细介绍一下vue常用的组件通信方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

组建通信的基本模式:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息

组件通信的常用三种方式
1.props(父组件向子组件传值)
parent.vue
立即学习“前端免费学习笔记(深入)”;
专为中小型企业定制的网络办公软件,富有竞争力的十大特性: 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装,建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件,使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件,提供web方式的远程邮件服务。 4、集成语音会议组件,节省长途话费开支。 5、集成手机短信组件,重要信息可直接发送到员工手机。 6、集成网络硬
child.vue
child的名字叫:{{childName}}
2.$emit(子组件向父组件传值–局部消息订阅)
parent.vue
立即学习“前端免费学习笔记(深入)”;
child.vue
child的名字叫:{{childName}}
3.bus全局消息订阅
bus.js
const install = (Vue) => {
const Bus = new Vue({
methods: {
on (event, ...args) {
this.$on(event, ...args);
},
emit (event, callback) {
this.$emit(event, callback);
},
off (event, callback) {
this.$off(event, callback);
}
}
})
Vue.prototype.$bus = Bus;
}
export default install;main.js
import Bus from "./assets/js/bus"; Vue.use(Bus);
child.vue
child的名字叫:{{childName}}
向child2打招呼
child2.vue
child2的名字叫:{{child2Name}}
推荐学习:vue.js教程









