Vue中的$emit和$refs简单应用

摘要：
最近写了有关 vue 中的组件，涉及到了 $emit 和 $refs两种方法，感觉非常的有用，所以特意做了一个小的总结。

一、$emit?
$emit 是 Vue 中的一个实例方法/事件，简单的来说就是：父组件可以使用 props 把数据传给子组件，子组件可以使用 $emit触发父组件的自定义事件。

 vm.$emit(eventName,[...args])//第一个是事件名称，第二个是事件的附加参数

首先我们需要给子组件绑定自定义的事件：

针对于父组件
首先第一步将子组件引入进来

 js:
 import Children from "./ChildrenComponent.vue", //引入子组件并给它重新命名
 export default {
 name:  'Parent',
 components: {
     Children   //子组件名称
  }
 }

这个时候我们就可以在 HTML 里面去引入刚才的子组件了：

html:
<template>
<div>
    <Children></Children>
</div>
</template>

这个时候我们就可以监听事件并给子组件传值了：

html:
<template>
<div>
    <Children v-bind:name="name" v-on:changeMe="changeMe"></Children>
</div>
</template>

当然在监听事件和传值的前提我们需要先申明我们需要$emit 触发的父组件的自定义事件了，否则的话会报错：

js:
import Children from "./ChildrenComponent.vue", //引入子组件并给它重新命名
export default {
name:  'Parent',
props: {
  name:String;
},
components: {
         Children   //子组件名称
     },
 methods: {
    changeMe:function(name){
      console.log(name);
    }
 }
}

到此，子组件行为触发父组件的事件就完成了，这个实例事件是非常常用的，也是非常有用的，但是我们有没有想过，父组件中的Dom 触发事件如何影响子组件的 Dom 状态呢？

这里我们就可以用到 $refs 这个实例属性了。

官方描述是：一个对象，持有注册过的ref 特性的所有 Dom 元素和组件的实例.简单来说有两点：1、ref 加在普通的元素上，用this. $refs.（ref值） 获取到的是dom元素。2、ref 加在子组件上，用 this. $refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。

所以我们可以给父组件中定义的子组件加上 ref 属性：

html:
<template>
<div>
    <Children ref="child"></Children>
    <div v-on:click="changeStyle">点我改变颜色</div>  //给 Dom 一个点击事件
</div>
</template>

js:
import Children from "./ChildrenComponent.vue", //引入子组件并给它重新命名
export default {
name:  'Parent',
components: {
         Children   //子组件名称
     },
 methods: {
    chnageStyle: function(){
       this.$refs.child.changeChildrenStyle();//通过 ref 属性与子组件定义的 changeChildrenStyle()关联
    }
 }
}

子组件：

这样我们就能将父组件触发的事件与子组件绑定的事件关联，从而改变子组件的 Dom 状态了。

这样无论是子组件还是父组件都能对彼此的 dom 进行操作，是一个非常有用的方式。