vue组件化思想

组件化

组件化是vue的核心思想，主要是为了代码重用。

image.png

组件通信

父组件=>子组件

• 属性props

//child
props:{ msg: String }

//parent
<HelloWorld msg="Welcome to Your Vue.js App />

• 引用refs

//parent
<HelloWorld ref="hw" />
//获取子组件或者子节点
this.$refs.hw.xx

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

//child
this.$emit('add',good)

//parent
<Cart @add="cartAdd($event)"></Cart>

兄弟组件：通过共同的祖辈组件
通过共同的祖辈组件搭桥，root。

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

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

祖先和后代之间
由于嵌套层数过多，传递props不切实际，vue提供了provide/inject的API完成任务

• provide/inject:能够实现祖先给后代传值

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

//descendant
inject:['foo']

注意：provide和inject主要为高阶插件/组件库提供用例，并不推荐直接用于应用性代码中。我们更多会在开源组件库中看到。
另外，反过来想要后代给祖代传递值这种方案就不行了，需要用下面方案

• dispatch：后代给祖先传值

//定义一个dispatch方法，指定要派发的事件名和数据
//在dispatch方法中也可以指定一个父元素来派发事件，否则终止
function dispatch(eventName,data){
    let parent = this.$patent
    //只要存在父元素就继续向上查找
    while(parent){
        if(parent){
            //父元素用$emit触发
            parent.$emit(eventName,data)
            //递归查找父元素
            parent = parent.$parent
        }else{
            break
        }
    }
}

//使用HelloWorld.vue
<h1 @click="dispatch('hello','hello world')">{{ msg }}</h1>

//App.vue
this.$on('hello',this.sayHello)

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

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

//Bus:事件派发、监听和回调管理，维护了一个回调函数组成的对象
class Bus{
    constructor(){
        {
            eventName1:[fn1,fn2],
            eventName2:[fn3,fn4]
        }
        this.callback = { }
    }
    $on(name,fn){
        this.callbacks[name] = this.callbacks[name] || [ ]
        this.callbacks[name].push(fn)
     }
    $emit(name,fn){
        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')

实践中可以用Vue代替Bus，因为它已经实现了相应的功能

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

插槽

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

Vue2.6.0之后采用全新v-slot语法代替之前的slot、slot-scope

匿名插槽

//comp1
<div>
    <slot></slot>
</div>

//parent
<comp1>hello </comp1>

具名插槽

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

//comp2
<div>
    <slot></slot>
    <slot name="content"></slot>
</div>

//parent，这里面用到的变量的作用域就是当前组件的作用域，会渲染完成之后再放到子组件的slot里面
<Comp2>
    <!-- 默认插槽用default做参数 -->
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽用插槽名做参数-->
    <template v-slot:content>内容....</template>
</Comp2>

作用域插槽

分发的内容要用到子组件中的数据,子组件将数据传给slot，分发的内容会变成一个函数在子组件里面执行，然后渲染到slot的位置

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

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

递归组件

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

//Node
<template>
    <div>
        <h3>{{data.title}}</h3>
        <!-- 必须有循环结束条件 -->
        <template v-if="data.children">
            <Node v-for= "d in data.children" :key="d.id" :data="d"></Node>
        </template>
    </div>
</template>

<script>
    export default {
        name:'Node', //name对递归组件是必需的
        props:{
            data:{
                type:Object,
                require:true
            },
        },
    }
</script>

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

以上是vue组件化思想涵盖的一些知识点，个人总结了一下，不胜完善，共同学习