欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-04 21:59:22
1.$refs的使用场景 父组件调用子组件的方法,可以传递数据。 父组件:

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>

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