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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
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
PHP 实例化类的一点摘记
2008/03/23 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
javascript回到顶部特效
2016/07/30 Javascript
轮播图组件js代码
2016/08/08 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python3多线程操作简单示例
2018/05/22 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python基础 range的用法解析
2019/08/23 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
RealTek面试题
2016/06/28 面试题
书法社团活动总结
2015/05/07 职场文书
python 网络编程要点总结
2021/06/18 Python