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

一、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()
  }
}