vue组件间的通信有父--->子、子--->父、非父子之间的通信 虽然我们稍微复杂的项目都用vuex来管理了,但是还是想写一篇关于有父--->子、子--->父、非父子 之间通信的文章。下面通过代码来讲述 父--->子组件间的通信 父级页面:import Header from './components/header' export default { name: 'App', data () { return { parentMsg: '你访问的是父级页面的数据', } }, components:{ Header, } } 子页面: {{parentMsg}} export default { name: 'Header', props:['parentMsg'], //接收父级页面传过来的数据 data(){ return { parentMsg:'' } } } 子--->父组件间的通信 父级页面: 父级页面接收子页面的数据:{{user}}
子页面: {{parentMsg}}header页面{{msg}}
非父子组件页面间的通信,可以使用EventBus使用EventBus首先需要新建一个EventBus.js,代码如下: import Vue from 'vue' export default new Vue() // import Vue from 'vue' // const EventBus = new Vue() // export {EventBus} 子页面1: 子页面2:sub页面接收header页面传过来的数据:{{msg}}
以上就是组件间同信的三种方式,还有一种通信就是vuex,vuex在本文就不写了,之前写过一篇对vuex的使用及理解。针对一些数据比较难管理的项目来说还是用vuex,方便数据的管理。



