vue中$refs, $emit, $on, $once, $off的使用详解


Posted in Javascript onMay 26, 2019

1.$refs的使用场景

父组件调用子组件的方法,可以传递数据。

父组件:

<div id="app">
  <child-a ref="child"></child-a>
  <button @click="getMyEvent">点击父组件</button>
<div>

<script>
  import ChildA from './child.vue'
  
  export default{
    components:{
      ChildA
    },
    data(){
      return {
        msg:'我是父组件的数据'
      }
    },
    methods:{
      getMyEvent(){
        //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
        this.$refs.child.emitEvent(this.msg)
      }
    }
  }
</script>

子组件:

<template>
  <button>点击我</button>
</template>
<script>
  export default{
    methods:{
      emitEvent(msg){
        console.log('接收的数据------'+msg)
      }
    }
  }
</script>

2.$emit的使用

子组件调用父组件的方法并传递数据。

子组件:

<template>
  <button @click="emitEvent">点击我</button>
</template>
<script>
  export default{
    data(){
      return{
        msg:'我是子组件的数据'
      }
    },
    methods:{
      emitEvent(){
        //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
        this.$emit('my-event',this.msg)
      }
    }
  }
</script>

父组件:

<template>  
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    //父组件通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值。
  </div>
</template>
<script>
  import childA from './child.vue';
  export default {
    components:{
      childA
    },
    methods:{
      getMyEvent(msg){
       console.log('接收数据---'+msg);
       //接收数据,我是子组件的数据
      }
    }
  }
</script>

3.$on的使用场景

兄弟组件之间相互传递数据。

首先创建一个Vue的空白实例(兄弟组件的桥梁)

import Vue from 'vue';
export default new Vue();

子组件A:发送放使用$emit自定义事件把数据带过去。

<template>
  <div>
    <span>A组件-{{msg}}</span>
    <input type="button" value="把A组件数据传递给B" @click="send">
  </div>
</template>
<script>
  import eventBus from './eventBus';
  export default{
    data(){
      return{
        msg:{
          a:'111',
          b:'222'
        }
      }
    },
    methods:{
      send(){
        eventBus.$emit('aevent',this.msg)
      }
    }
  }
</script>

子组件B:接收方通过$on监听自定义事件的callback接收数据

<template>
  <div>
    <span>B组件,A传的数据为--{{msg}}</span>
  </div>
</template>
<script>
  import eventBus from './eventBus.vue'
  export default {
    data(){
      return{
        msg:''
      }
    },
    mounted(){
      eventBus.$on('aevent',(val)=>{//监听事件aevent,回调函数要使用箭头函数。
        console.log(val);//打印结果;我是a组件的数据。
      })
    }
  }
</script>

父组件:

<template>  
  <div>
    <childa></childa>
    <br/>
    <childb></childb>
  </div>
</template>
<script>
  import childa from './childa.vue';
  import childb from './childb.vue';
  export default{
    componets:{
      childa,
      childb
    },
    data(){
      return{
        msg:''
      }
    }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
微信小程序实现手指拖动选项排序
Apr 22 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 #Javascript
vue指令做滚动加载和监听等
May 26 #Javascript
vxe-table vue table 表格组件功能
May 26 #Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
vue项目打包后怎样优雅的解决跨域
May 26 #Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python 错误和异常小结
2013/10/09 Python
python多线程编程方式分析示例详解
2013/12/06 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
c++工程师面试问题
2013/08/04 面试题
学生学习总结的自我评价
2013/10/22 职场文书
应届生新闻编辑求职信
2013/11/19 职场文书
小学生班会演讲稿
2014/01/09 职场文书
党员干部一句话承诺
2014/05/30 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
会计稽核岗位职责
2015/04/13 职场文书
安全教育培训心得体会
2016/01/15 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL