组件化常用技术（Vue）

1.组件通信、传值

父组件 => 子组件：

属性props

// child 
props: { msg: String } 
// parent
<Hello msg="Welcome to Your Vue.js App"/>

**引用refs
**

// parent

<hello ref="hw"/>

this.$refs.hw.xx

子组件 => 父组件：自定义事件

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

兄弟组件：通过共同祖辈组件 **

通过共同的祖辈组件搭桥，$parent或$root。

// brother1

this.$parent.$on('foo', handle)

// brother2

this.$parent.$emit('foo')

祖先和后代之间 provide/inject：能够实现祖先给后代传值

// ancestor 祖代中输入一个值

provide() {
return {foo: 'foo'}
}

//后代中使用
// descendant 
inject: ['foo']

dispatch：后代给祖先传值

//定义一个dispatch方法 指定要派发事件名称和数据
function dispatch(eventName,data){
    let parent = this.$parent
    //只要还存在父元素就继续往上查找
    while(parent){
    //父元素用$emit触发
    parent.$emit(eventName,data)
    //递归查找父元素
    parent = parent.$parent
    }
}
//使用 Helloword.vue
<h1 @click="dispatch('hello','hello,word')">{{msg}}</h1>
App.vue
this.$on('hello',this.sayHello)

任意两个组件之间：事件总线 或 vuex

事件总线：创建一个Bus类负责事件派发、监听和回调管理

// Bus：事件派发、监听和回调管理

class Bus{

constructor(){

// {

// eventName1:[fn1,fn2],

// eventName2:[fn3,fn4],

// }

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 = new Bus()

// child1

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

// child2

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

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

插槽 Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope

匿名插槽

<!-- com -->

<div>

<slot :foo="foo"><slot>

<div>

<!-- parent -->

<Com></Com>

具名插槽

<!-- com2 -->

<div>

<slot></slot>

<slot  name="content"><slot>

</div>
 //parent
<Comp2>
<!-- 默认插槽用default做参数 -->

<template  v-slot:default>具名插槽{{父元素数据}}<template>

<!-- v-slot:插槽名 具名插槽用插槽名做参数 -->

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

</Comp2>

作用域插槽

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

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

//parent
<Comp3>
<!-- v-slot:插槽名="作用域上下文ctx" -->
<template  v-slot:default="ctx">

来自子组件数据：{{ctx.foo}}

<template>

<Comp3>

递归组件

递归组件是可以在他们自己模板中调用自身的组件

<!-- 递归组件 -->

<!-- 递归组件是可以在他们自己模板中调用自身的组件 -->

<template>

<div>

<h3>{{data.title}}</h3>

<Node  v-for="d  in  data.children" :key="d.id" :data="d"></Node>

</div>

</templatev>

<scriptv>

export default {

name:'Node', //name对递归组件是必要的

props:{

data:{

type:Obect,

require:true

}

}

}

<script>


<!-- 使用 -->

<Node :data="{id:'1',title:"递归组件",children:[{...}]}"><Node>