vue-组件通讯

组件化

vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界 ⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护 性，便于多⼈协同开发

组件通信常⽤⽅式

props event vuex

⾃定义事件

边界情况 $parent $children $root $refs provide/inject

⾮prop特性

$attrs $listeners

get新技能获取并绑定到当前组件所有特性和事件

v-bind="$attrs" v-on="$listeners" provide/inject

公交总线

Bus类简单实现

兄弟组件传值$parent和$root通讯

大儿子created里面给parent绑定事件

created() {

this.$parent.$on('parentEvent',(data)=>{

console.log(data);

})

},

二儿子里面触发父组件的事件

<button @click="$parent.$emit('parentEvent',msg)">二儿子</button>

$children(子组件排序是随机的，慎用)

⽗组件可以通过$children访问⼦组件实现⽗⼦通信

// parent 

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

$attrs/$listeners

包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当⼀个组件没有 声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 (class 和 style 除外)，并且可以通过 vbind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。

// child：并未在props中声明foo

 <p>{{$attrs.foo}}</p>

// parent 

<HelloWorld foo="foo"/>

refs

获取⼦节点引⽤

// parent <HelloWorld ref="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> <slot name="content"></slot> </div>

// parent <Comp2>  

  <!-- 默认插槽⽤default做参数 --> 

   <template v-slot:default>具名插槽</template>

    <!-- 具名插槽⽤插槽名做参数 -->   

 <template v-slot:content>内容...</template> </Comp2>

作⽤域插槽

分发内容要⽤到⼦组件中的数据

// comp3 

<div> <slot :foo="foo"></slot> </div>

// parent

 <Comp3> 

   <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->

    <template v-slot:default="slotProps">  

  来⾃⼦组件数据：{{slotProps.foo}}  

  </template> 

</Comp3>