1.父子组件之间进行通讯:
父组件通过属性和子组件通讯,子组件通过事件和父组件通讯。vue2.x只允许单向数据传递。
先定义一个子组件AInput.vue:
在父组件store.vue中引用子组件:
{
{inputValue}}
由于v-model可以进行双向数据绑定,所以store.vue的写法等效于:
{
{inputValue}}
实现效果:
2.兄弟之间进行通讯:
2.1如果是同一页面之间的子组件进行通讯:
AShow: {
{ content }}
2.2如果是不同页面之间的子组件进行通讯,需要借助借助中央事件总线
新建一个bus.js:
import Vue from 'vue'const Bus =new Vue();export default Bus;
在main.js中引用Bus,同时在Vue实例原型增加$bus:
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import Bus from './lib/bus'Vue.config.productionTip = falseVue.prototype.$bus = Bus;new Vue({ router, store, render: h => h(App)}).$mount('#app')
App.vue:
下面演示:http://localhost:8080/#/named_view页面中email和tel组件进行通信:
email.vue:
在tel.vue中监听事件:
{
{ message }}
效果: