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验证表单第二部分
Nov 25 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
python修改注册表终止360进程实例
2014/10/13 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python中的Cookie模块如何使用
2020/06/04 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
党支部综合考察意见
2015/06/01 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers