博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue状态管理-Bus
阅读量:5016 次
发布时间:2019-06-12

本文共 1292 字,大约阅读时间需要 4 分钟。

1.父子组件之间进行通讯:

父组件通过属性和子组件通讯,子组件通过事件和父组件通讯。vue2.x只允许单向数据传递。

先定义一个子组件AInput.vue:

在父组件store.vue中引用子组件:

由于v-model可以进行双向数据绑定,所以store.vue的写法等效于:

实现效果:

2.兄弟之间进行通讯:

2.1如果是同一页面之间的子组件进行通讯:

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中监听事件:

效果:

 

 

 

 

 

 

转载于:https://www.cnblogs.com/qicao/p/10795211.html

你可能感兴趣的文章
笔记_小结
查看>>
Linux lsof命令 umount U盘
查看>>
自定义Font
查看>>
linux svn 服务端搭建
查看>>
linux时间同步ntp服务的安装与配置
查看>>
django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法...
查看>>
网络编程-socket并发-粘包问题
查看>>
python 中安装pandas
查看>>
Hibernate 的<generator class="native"></generator>的不同属性含义
查看>>
linux修改root账户的用户名所得的教训
查看>>
【LeetCode】Flatten Binary Tree to Linked List
查看>>
读后感-浮生六纪
查看>>
执行指定路径的程序文件
查看>>
Leetcode-950 Reveal Cards In Increasing Order(按递增顺序显示卡牌)
查看>>
[Linux] 在 Linux CLI 使用 ssh-keygen 生成 RSA 密钥
查看>>
14款下载有用脚本的超酷网站
查看>>
LXC-Linux Containers介绍
查看>>
7.31实习培训日志-docker sql
查看>>
c#中使用servicestackredis操作redis
查看>>
ios app 真机crash报告分析
查看>>