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

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue $emit $refs子父组件间方法的调用实例

    1.$emit 子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用"-"隔开 子组件: <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods:

  • vue.js $refs和$emit 父子组件交互的方法

    本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="

  • vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. vm.$emit( event, [-args] ) 触发当前实例上的事件.附加参数都会传给监听器回调. 例子: //父组件 <template> <ratingselect @select-type="onSele

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

  • vuejs使用$emit和$on进行组件之间的传值的示例

    vuejs使用$emit和$on进行组件之间的传值的示例

    $emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了. 注意:$emit和$on的事件必须在一个公共的实例上,才能够触发. 例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件实现目录的展现,但是在vuejs框架里面,tree目录需要通过递归组件实现. 1.现在有两个组件,父组件contact_index.vue,子组件cust_tree.vue 2.点击父组件里面的选择

  • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • Vue 2.0入门基础知识之内部指令详解

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

  • Vue.js分页组件实现：diVuePagination的使用详解

    Vue.js分页组件实现：diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

  • Vue的事件响应式进度条组件实例详解

    写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • vue iview组件表格 render函数的使用方法详解

    如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • vue中node_modules中第三方模块的修改使用详解

    最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格, 第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了 第二种方法:本想这个要是样式这么改,还有路可走:要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底, 在nod

  • Vue 2.0 侦听器 watch属性代码详解

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

随机推荐