Vue组件通讯一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。组件通信常用

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

vue组件提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。

组件通信常用方式

props
eventbus
vuex
自定义事件 边界情况
$parent
$children
$root
$refs
provide/inject 非prop特性
$attrs
$listeners

组件通信

props

父给子传值

第一步: 在子组件的调用标签上声明一个自定义属性, 属性值来自父组件的data
第二步: 在子组件的定义部分声明一个属性props, 值是一个数组, 将自定义属性的名字在props 中进行声明; 在子组件的模板部分可以使用props 中声明过的数据.

//child
props:{msg:String}
//parent
<HelloWorld msg="WelcometoYourVue.jsApp"/>

父组件传递过来的数据，（可以使用data和computed解决）

总结: props 是从上一级组件传递到下一级组件既（父子组件），也就是所谓的单向数据流。而且 props 只读，不可被修改，所有修改都会失效并警告。

$emit

子给父传值

第一步: 在子组件的调用标签只上通过v-on 动态绑定一个自定义事件, 自定义事件的处理函数必须在父组件的methods 中提前声明, 这个函数需要一个形参, 来接收子组件传递过来的数据.
第二步: 在子组件中通过this.$emit(自定义事件,数据)触发自定义事件的执行, 此动作可以放在子组件的created/mounted 生命周期中, 可以放在某个事件处理函数中

//child
this.$emit('add',good)
//parent
<Cart @add="cartAdd($event)"></Cart>

总结： $emit绑定一个自定义事件, 当被执行时, 就会将参数传递给父组件,父组件通过v-on监听并接收参数。

EventBus 通过EventBus进行信息的发布与订阅

任意两个组件之间传值常用事件总线或 vuex的方式。第一步: 声明一个空的Vue 实例对象, 作为事件中心的角色第二步: 在组件中通过 $emit(自定义事件,数据)的方式触发事件(此操作可放在某个事件处理函数或者组件的生命周期函数created/mounted 中) 第三步: 在组件中通过.$ on(自定义事件,function(data){})

<div><h1>{{msgFromParent}}</h1></div>, 
// 数据模型data :function(){ return { title:'子组件标题'}},
//获取父组件中传过来的值props:['msgFromParent']}}});
60监听自定义事件的执行( 操作可放在bcom 组件的声明周期函数created/mounted 中)

//Bus：事件派发、监听和回调管理
classBus{
    constructor(){
        this.callbacks={}
}
    $on(name,fn){
        this.callbacks[name]=this.callbacks[name]||[]this.callbacks[name].push(fn)
    $emit(name,args){
        if(this.callbacks[name{
            this.callbacks[name].forEach(cb=>cb(args))
        }
    }
}
//main.js
Vue.prototype.$bus=newBus()

//child1
this.$bus.$on('foo',handle)

//child2
this.$bus.$emit('foo')

vuex

创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更

优点：解决了非父子组件的通信，减少了ajax请求次数，有些可以直接从state中获取缺点：刷新浏览器，vuex中的state会重新变为初始状态，解决办法是vuex-along，得配合计算属性和sessionstorage来实现

$parent/$ root

兄弟组件之间通信可通过共同祖辈搭桥, $parent或$ root。

//brother1
this.$parent.$on('foo',handle)
//brother2
this.$parent.$emit('foo')

$children

父组件可以通过$children访问子组件实现父子通信。

//parent
this.$children[0].xx='xxx'

注意：$children不能保证子元素顺序

$listeners/$ attrs

Vue2.4中加入的 $attrs/$ listeners可以进行跨级的组件通信

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

//child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
//parent
<HelloWorldfoo="foo"/>

refs

获取子节点引用

//parent
<HelloWorldref="hw"/>
mounted(){
    this.$refs.hw.xx='xxx'
}

provide/inject

以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效，这成为了跨组件通信的基础

能够实现祖先和后代之间传值

//ancestor
provide(){
    return{foo:'foo'}
}
//descendant
inject:['foo']

插槽

插槽语法是Vue 实现的内容分发 API，用于复合组件开发。该技术在通用组件库开发中有大量应用。

匿名插槽

//comp1
<div>
    <slot></slot>
</div>
//parent
<comp>hello</comp>

具名插槽

将内容分发到子组件指定位置

//comp2
<div>
    <slot></slot>
    <slotname="content"></slot>
</div>
//parent
<Comp2>
    <!--默认插槽用default做参数-->
    <templatev-slot:default>具名插槽</template>
    <!--具名插槽用插槽名做参数-->
    <templatev-slot:content>内容...</template>
</Comp2>

作用域插槽

分发内容要用到子组件中的数据

//comp3
<div>
    <slot:foo="foo"></slot>
</div>
//parent
<Comp3>
    <!--把v-slot的值指定为作用域上下文对象-->
    <templatev-slot:default="slotProps">
        来自子组件数据：{{slotProps.foo}}
    </template>
</Comp3>

Vue组件通讯