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 相关文章推荐
node.js中的socket.io入门实例
Apr 26 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
js表单登陆验证示例
Oct 19 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
php购物车实现代码
2011/10/10 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
js实现小星星游戏
2020/03/23 Javascript
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
十八届三中全会报告学习材料
2014/02/17 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
学校门卫岗位职责
2014/03/16 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年班务工作总结
2014/12/02 职场文书
见习期个人总结
2015/03/05 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
Springboot中如何自动转JSON输出
2022/06/16 Java/Android