vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用

た入场券 2021-09-19 18:20 400阅读 0赞

### 一、vue2开发中$emit 、$on 、$once 、$off  的使用 ###

**简单概述：**

1、vm.$emit(eventName,callback) 和 $on(eventName,callback) 一般结合使用。使用**$emit触发当前实例上的自定义事件（并将附加参数都传给监听器回调），使用 $on 监听该事件并调用回调函数**。这两个事件方法可以**结合props 属性实现父子组件双向传参。**

2、vm.**$once(eventName,callback) 监听一个自定义事件，但是只触发一次，**在第一次触发之后移除监听器。

3、vm.**$off(\[eventName,callback\]) 用来移除自定义事件监听器**。如果**没有提供参数，则移除所有的事件监听器**；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。

**demo01：$emit 和$on 实现父子组件双向传参**

父组件如下

<template>
        <div>
            <div>父组件的toCity{
       {toCity}}</div>
            <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
        </div>
    <template>
    
    <script>
      import TrainCity from "./train-city";
      export default {
        name:'index',
        components: {TrainCity},
        data () {
          return {
            toCity:"北京"
          }
        },
        methods:{
          updateCity(data){//触发子组件城市选择-选择城市的事件
            this.toCity = data.cityname;//改变了父组件的值
            console.log('toCity:'+this.toCity)
          }
        }
      }
    </script>

子组件如下

<template>
      <div class="container">
        <h3>这是接收到的父组件传过来的参数:{
       {ParentData}}</h3> 
        <br/><button @click='sendToParent(`大连`)'>点击此处将‘大连’发射给父组件</button>
      </div>
    </template>
    
    <script>
      export default {
        name:'trainCity',
        props:['ParentData'], // 用来接收父组件传给子组件的数据
        methods:{
          sendToParent(val) {
            let data = {
              cityname: val
            };
            this.$emit('showCityName',data);//sendToParent方法触发showCityName事件，并传参到监听方法
          }
        }
      }
    </script>

### 二、vue中$root、$refs、$parent 的使用 ###

**简单概述：**

1、**$root 可以用来获取vue的根实例**，比如在简单的项目中将公共数据放再vue根实例上(可以**理解为一个全局 store** ),因此可以**代替vuex实现状态管理**；

2、**$parent 属性可以用来从一个子组件访问父组件的实例**，可以**替代将数据以 prop 的方式传入子组件的方式**；当变更父级组件的数据的时候，容易造成调试和理解难度增加；

3、**在子组件上使用ref特性后，this.$refs 属性可以直接访问该子组件**。可以代替事件$emit 和$on 的作用。使用方式是通过 **`ref` 特性**为这个子组件赋予一个 ID 引用，**再通过this.$refs.testId获取指定元素**。注意：**`$refs` 只会在组件渲染完成之后生效，并且它们不是响应式的**。这仅作为一个用于直接操作子组件的“逃生舱”——你**应该避免在模板或计算属性中访问 `$refs`**。

**demo1：****`$root` 属性获取根实例**

在每个 `new Vue` 实例的子组件中，其根实例可以通过 `$root` 属性进行访问。例如，在这个根实例中：

// Vue 根实例
    new Vue({
      data: {
        foo: 1
      },
      computed: {
        bar: function () { /* ... */ }
      },
      methods: {
        baz: function () { /* ... */ }
      }
    })

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用

// 获取根组件的数据
    this.$root.foo
    
    // 写入根组件的数据
    this.$root.foo = 2
    
    // 访问根组件的计算属性
    this.$root.bar
    
    // 调用根组件的方法
    this.$root.baz()

**demo2：****`$refs` 属性获取子组件实例**

<input ref="input">
    
    methods: {
      // 用来从父级组件聚焦输入框
      focus: function () {
        this.$refs.input.focus()
      }
    }