Vue 组建通信

Vue 组件通信

1.父组件向子组件传递信息

// parent.vue  child是子组件 需要传递的信息是msg
<child :msg="message"></child>

// child.vue 子组件通过props数据来接收信息
data() {
	return {
		props:['msg']
	}
}

2.子组件向父组件传递信息

// child.vue
this.$emit('msg', 'message')

// parent.vue
<child @msg="msg"></child>

3.provide/inject组合
provide/inject 组合以允许一个祖先组件向其所有子孙后代注入一个依赖，可以注入属性和方法，从而实现跨级父子组件通信。在开发高阶组件和组件库的时候尤其好用。

// 父组件 index.vue
data() {
    return {
        title: 'bubuzou.com',
    }
}
provide() {
    return {
        detail: {
            title: this.title,
            change: (val) => {
                console.log( val )
            }
        }
    }
}

// 子孙组件 children.vue
inject: ['detail'],
mounted() {
    console.log(this.detail.title)  // bubuzou.com
    this.detail.title = 'hello world'  // 虽然值被改变了，但是父组件中 title 并不会重新渲染
    this.detail.change('改变后的值')  // 执行这句后将打印：改变后的值 
}

4.EventBus 进行信息的发布和订阅，实现在任意2个组件之间通信
两种写法都可以初始化一个 eventBus 对象

// 1.通过导出一个 Vue 实例，然后在需要的地方引入：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

使用 EventBus 订阅和发布消息：
import {EventBus} from '../utils/eventBus.js'
// 订阅处
EventBus.$on('update', val => {})
// 发布处
EventBus.$emit('update', '更新信息')

//2.在 main.js 中初始化一个全局的事件总线：
// main.js
Vue.prototype.$eventBus = new Vue()

// 订阅处
this.$eventBus.$on('update', val => {})
// 发布处
this.$eventBus.$emit('update', '更新信息')

5.attrs/listeners 可以进行跨级的组件通信
$attrs 包含了父级作用域中不作为 prop 的属性绑定（class 和 style 除外）

// 父组件 index.vue
<list class="list-class" title="标题" desc="描述" :list="list"></list>

// 子组件 list.vue
props: {
    list: [],
},
mounted() {
    console.log(this.$attrs)  // {title: "标题", desc: "描述"}
}
------------------------------------------------------------------------
// 子组件 list.vue
<detail v-bind="$attrs"></detial>

// 孙组件 detail.vue
mounted() {
    console.log(this.$attrs)  // {title: "标题", desc: "描述"}
}

在子组件中我们定义了一个 v-bind="$attrs" 可以把父级传过来的参数，去除 props、class 和 style 之后剩下的继续往下级传递，这样就实现了跨级的组件通信。

attrs 是可以进行跨级的参数传递，实现父到子的通信；同样的，通过 listeners 用类似的操作方式可以进行跨级的事件传递，实现子到父的通信。listeners 包含了父作用域中不含 .native 修饰的 v-on 事件监听器，通过 v-on="$listeners" 传递到子组件内部。

// 父组件 index.vue
<list @change="change" @update.native="update"></list>

// 子组件 list.vue
<detail v-on="$listeners"></detail>

// 孙组件 detail.vue
mounted() {
    this.$listeners.change()
    this.$listeners.update() // TypeError: this.$listeners.update is not a function
}

Vue实操绝密干货