vue组件之间通信

今天做项目时，用了this.$parent.$parent.$parent.去调用组件，结果被提醒了一下。丢死人了。

现在，做个总结吧！

前提 B组件去调用A组件的方法

1.使用bus（都很适合） 

在utils文件夹中创建bus.js

import Vue from 'vue'
const Bus = new Vue();
export default Bus;
           

调用bus.js @/utils/bus.js

在A组件和B组件中去使用。先导入

import Bus from "@/utils/bus.js"


A组件（被动方）
Bus.$on('name',e={})

b组件（主动方）
Bus.$emit('name','传递的值')
           

2.$emit(子组件调用父组件) 子组件里的name值是父组件函数的名字

父组件：

<div @name-""></div>

name(e){

}

子组件：

<div @click="set"></div>

set(e){

        this.$emit('name',e)

}

3.ref 

第一种情况：

<div ref='name'>aaa</div>

this.$refs.name 获取的是div

<child ref='name'></child>

this.refs.name 获取的是子组件