Vue 自定义事件 && 组件通信
1 App.vue
2 <template>
3 <!--
4 组件的自定义事件:
5 1.一种组件间通信的方式,使用于:子组件===>父组件
6 2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)
7 3.绑定自定义事件:
8 .第一种方式,在父组件中:<Demo @custonEvent="test"/> 或 <Demo v-on:custonEvent="test"/>
9 .第二种方式,在父组件中
10 <demo ref="demo" />
11 mounted(){this.$refs.demo.on('custonEvent', this.test)}
12 .若想让自定义事件只杯触发一次,可以使用once事件修饰符,或$once方法
13 4.触发自定义事件:this.$emit('custonEvent', 数据参数)
14 5.解绑自定义事件: this.$off('custonEvent');
15 6.组件上也可以绑定原生DOM事件,需要使用native修饰符
16 7.注意:通过this.$refs.xxx.$on('custonEvent', 回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题。
17 -->
18 <div class="app">
19 <h1>{{msg}}</h1>
20 <!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
21 <School :getSchoolName="getSchoolName"/>
22 <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据。 -->
23 <!-- <Student v-on:customEvent.once="getStudentName"/> 事件修饰符同样可以使用 -->
24 <!-- <Student v-on:customEvent="getStudentName"/> -->
25 <!-- 通过指定ref,在当前组件挂载完(mounted),的时候绑定自定义事件,这种相对比较灵活,比如:三秒后绑定事件 -->
26 <!-- 通过native事件修饰符来绑定原生事件 -->
27 <Student ref="student" @click.native="studentClick"/>
28 </div>
29 </template>
1 全局事件总线(GlobalEventBus)
2 1.一种组件间通信的方式,适用于任意组件间通信
3 2.安装全局事件总线:
4 new Vue({
5 render: h => h(App),
6 beforeCreate(){
7 Vue.prototype.$bus = this;
8 }
9 }).$mount('#app');
10 3.适用事件总线:
11 a.接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
12 methods(){
13 demo(data){...}
14 }
15 ...
16 mounted() {
17 this.$bus.$on('xxx', this.demo);
18 },
19 beforeDestroy(){
20 this.$bus.$off('xxx');
21 }
22 b.提供数据:this.$bus.$emit('xxx', data);
23 4.最好在beforeDestroy钩子回调中,用$off去解绑当前组件所用到的事件
24
25
26 消息订阅与发布(pubsub)
27 1.一种组件间通讯的方式,适用于任意组件间通信。
28 2.适用步骤:
29 a.安装pubsub: npm i pubsub-js
30 b.引入:import pubsub from pubsub-js
31 c.接受数据:A组件想接受数据,则在A组件中订阅消息,订阅的回调留在A组件自身
32 methods(){
33 demo(data){....}
34 }
35 ....
36 mounted(){
37 this.pid = pubsub.subscribe('xxx', this.demo);//订阅消息
38 }
39 beforeDestroy(){
40 pubsub.unsubscribe(this.pid);
41 }
42 d.提供数据:pubsub.publish('xxx', data)
43 e.最好在beforeDestroy钩子中,用pubsub.unsubscribe(pid)去取消订阅
30
31 <script>
32 import School from './components/School.vue'
33 import Student from './components/Student.vue'
34
35 export default {
36 name: 'App',
37 components:{
38 School,Student,
39 },
40 data(){
41 return {
42 msg: '你好啊'
43 }
44 },
45 methods:{
46 getSchoolName(name){
47 console.log('App getSchoolName:', name);
48 },
49 getStudentName(name,...a){ // ...a意思是,将其他参数都放到a上面
50 console.log('App getStudentName:', name);
51 console.log('App getStudentName:', a);
52 }
53 },
54 mounted() {
55 // 绑定自定义事件
56 this.$refs.student.$on('customEvent', this.getStudentName);
57
58 // this.$refs.student.$onece('customEvent', this.getStudentName); 事件修饰符
59 }
60 }
61 </script>
62
63 <style>
64 .app{
65 background-color: gray;
66 padding: 5px;
67 }
68 </style>
1 School.vue
2 <template>
3 <div class="school">
4 <h3>学校名字:{{name}}</h3>
5 <h3>学校地址:{{address}}</h3>
6 <button @click="sendSchoolName" >把学校名传给App</button>
7 </div>
8
9 </template>
10
11 <script>
12 export default {
13 name: 'School',
14 data(){
15 return {
16 name: 'BaiYeShu',
17 address: '深圳'
18 }
19 },
20 props:['getSchoolName'],
21 methods:{
22 sendSchoolName(e) {
23 this.getSchoolName(this.name);
24 }
25 }
26
27 }
28 </script>
29
30 <style scoped>
31 .school{
32 background-color: skyblue;
33 padding: 5px;
34 }
35 </style>
1 Student.vue
2 <template>
3 <div class="student">
4 <h3>学生姓名:{{name}}</h3>
5 <h3>学生性别:{{sex}}</h3>
6 <button @click="sendStudentName">把学生名发送给App</button>
7 <button @click="unbind">解绑自定义事件</button>
8 </div>
9 </template>
10
11 <script>
12 export default {
13 name: 'School',
14 data(){
15 return {
16 name: '张三',
17 sex: '男',
18 }
19 },
20 methods:{
21 sendStudentName(){
22 // 触发自定义事件
23 this.$emit('customEvent', this.name, 1,2,3);
24 },
25 unbind(){
26 this.$off('customEvent'); // 解绑指定事件
27 // this.$off(['customEvent', 'm1']); // 解绑多个事件
28 // this.$off(); // 解绑所有事件
29 }
30 }
31 }
32 </script>
33
34 <style scoped>
35 .student {
36 background-color: pink;
37 padding: 5px;
38 margin-top: 30px;
39 }
40 </style>
Vue 自定义事件 && 组件通信的更多相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue的父子组件通信(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue学习笔记-组件通信-子传父(自定义事件)
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...
- vue自定义事件 子组件把数据传出去
每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 1.使用v-on绑定自定义 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- 浅谈vue学习之组件通信
vue用组件化简化了我们编写代码的复杂度,组件之间经常会出现数据传递的情况,那么组件之间是怎样通信的呢? 使用props传递数据 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内 ...
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
随机推荐
- java并发编程-StampedLock高性能读写锁
目录 一.读写锁 二.悲观读锁 三.乐观读 欢迎关注我的博客,更多精品知识合集 一.读写锁 在我的<java并发编程>上一篇文章中为大家介绍了<ReentrantLock读写锁> ...
- 【单片机】CH32V103v8t6开发板调试笔记
一.开发板样式和资源 找官网的商务申请了一块开发板,打算试一下串口打印程序测试,发现网上关于这个板子的相关资料特别少,为方便后来人,就顺便记录一下,板子资源如下图所示. 板子芯片的引脚排布图 二.使用 ...
- 面试官:Dubbo是什么,他有什么特性?
哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,今天还是过周末,虽然 ...
- Java并发3
轻量级锁:如果一个有多个线程访问,但多线程访问的时间是错开的,没有竞争,那么可以使用轻量级锁来优化: monitor:重量级锁: 正常我们使用synchronized时,没有竞争则是轻量级锁,当遇到竞 ...
- .NetCore实现图片缩放与裁剪 - 基于ImageSharp
前言 (突然发现断更有段时间了 最近在做博客的时候,需要实现一个类似Lorempixel.LoremPicsum这样的随机图片功能,图片有了,还需要一个根据输入的宽度高度获取图片的功能,由于之前处理图 ...
- iftop使用
在linux中监控系统资源.进程.内存占用等信息,可以使用top命令. 查看网络状态可以使用netstat工具. 如果想查看实时的网络流量,监控TCP/IP连接等,则可以使用iftop工具. 一.if ...
- SpringBoot启动代码和自动装配源码分析
随着互联网的快速发展,各种组件层出不穷,需要框架集成的组件越来越多.每一种组件与Spring容器整合需要实现相关代码.SpringMVC框架配置由于太过于繁琐和依赖XML文件:为了方便快速集成第三 ...
- PostgreSQL 9.1 飞升之路
PostgreSQL upgrade 以升级 PostgreSQL 9.1 至 PostgreSQL 11 (跨越 9.2.9.3.9.4.9.5.9.6.10 六个大版本) 为例,本文将分享一下过去 ...
- scrapy框架入门
scrapy迄今为止依然是世界上最好用,最稳定的爬虫框架,相比于其他直接由函数定义的程序, scrapy使用了面向对象并对网页请求的过程分成了很多个模块和阶段,实现跨模块和包的使用,大大提升了代码的稳 ...
- 如果一个promise永不resolve,会内存泄漏吗
答:跟内存泄漏没有直接关系gc的策略不会改变,如果该promise没有被人引用,就会被gc掉.如果仍被引用,就不会被gc掉.即使一个promise,resolve或者reject了,但是它还被人引用, ...