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

1.$refs的使用场景

目前累计服务客户上千，积累了丰富的产品开发及服务经验。以网站设计水平和技术实力，树立企业形象，为客户提供成都网站设计、成都网站建设、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。创新互联始终以务实、诚信为根本，不断创新和提高建站品质，通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合，为客户提供更好的一站式互联网解决方案，携手广大客户，共同发展进步。

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

父组件：

<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>

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

当前标题：vue中$refs,$emit,$on,$once,$off的使用详解
标题网址：https://www.cdcxhl.com/article46/ijsghg.html

成都网站建设公司_创新互联，为您提供网站建设、企业建站、手机网站建设、App开发、外贸网站建设、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容