什么是组件化

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

组件的通讯方式

props
$emit/$on
event bus
vuex

边界情况

$parent
$children
$root
$refs
provide/inject

⾮prop特性

$attrs
$listeners

组件通讯

props

父传子

//child  
props:{msg:number}  
//parent  
<HelloWord msg='11111'>

自定义事件

子给父传值

//child  
this.$emit('add',great)
//parent  
<Parent @add='add($event)'>

事件总线

任意两个组件之间传值常用事件总线或vuex方式。

vuex

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

`$parent/$root`

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

// 兄弟1

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

// 兄弟2

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

`$children`

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

// parent

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

refs

获取⼦节点引⽤

// parent

<Parent ref="tb"/>

mounted() {

this.$refs.tb.xx = 'xxx'

}

`$attrs/$listeners`

包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当⼀个组件没有

声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 ( class 和 style 除外)，并且可以通过 v-bind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。

provide/inject

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


provide() {

return {foo: 'foo'}

}

inject: ['foo']

插槽

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


<div>

<slot></slot>

</div>

// parent
<parent>hello</parent>

具名插槽

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

//parent2

<div>

<slot></slot>

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

</div>

// parent
<Parent2>

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

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

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

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

</Parent2>

作用域插槽

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

// parent3

<div>

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

</div>

// parent
<Parent3>

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

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

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

</template>

</Parent3>

vue组件化