Vue组件化 - 掘金

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

一、组件化

相信大家都很熟悉vue的组件化，今天再来详细总结下。Vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用。组件化可以重复使用，提高开发效率，提升项目木可维护性，更好地协同多人开发。

组件通信方式

props 父组件传给子组件，这里需要注意的是如果子组件写了default默认值并且子组件通过props里的字段判断是否存在就会有问题，所以需要用到props中的字段进行判断的时候，注意不要写default
```
//父组件:
<Button :name='name' :handerAdd='handlerAdd' />
//子组件
props: {
    name: {        type: String    },    handleAdd: {        type: Function    }}
```

$emit/$ on 自定义事件，子组件传给父组件

//父组件
<Button @handlerAdd='handlerAdd($event)' />
//子组件
this.$emit('handlerAdd',good);

event bus 事件总线，相当于中介，用于任意两个组件之间传值下面的vuex也可以

// Bus：事件派发、监听和回调管理
class Bus {
	 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 = new Bus();

//子组件1
this.$bus.$on('foo', handle);
//子组件2
this.$bus.$emit('foo');

vuex 创建唯一的全局数据管理者store，管理数据并通知组件状态更新。

边界情况

边界情况是:业务复杂时，组件之间减少和其他组件之间产生的强耦合，会导致组件复用性变差

$parent/$ root 用于兄弟组件之间通信， $parent父组件，$ root是根实例，可以通过共同祖辈进行搭桥
```
//兄弟组件1
this.$parent.$on('count', handle);
//兄弟组件2
this.$parent.$emit('count');
```
** $children** 父组件可以通过$ children来访问子组件的数据，实现了父子通信，但是$children不能保证子元素的顺序（因为有异步的组件）
```
//父组件
this.$children[0].count = 'count';
```
$refs 获取子节点引用，和$ children的区别是 $refs只要定义了就可以拿到什么节点都可以，$ children必须是自定义组件
```
//父组件
<Button ref='btn' />

mouted() {
    this.$refs.btn.xx = 'xxx';
}
```

provide/inject 主要实现祖先和后代之间的传值通信

//祖先组件
provide() {
    return {count: 'count'}
}
//后代组件
inject: ['count']

非props属性 $attrs/$ listeners 主要用于隔代传参，包含父组件中不作为props被识别获取的特性（绑定style和class除外）。当一个组件没有声明任何props时，这里会包含所有父组件作用域，并且可以通过v-bind='$attrs'传入内部组件，也就是在创建高级的组件（类似于react的高阶组件）扩展的时候非常有用。

 //$attrs
 //父组件
 <Button name='name' />
 //子组件,注：子组件没有声明props中的name
 <div>{{$attrs.name}}<div>
 
 //$listeners 
 //子组件给Grandson隔代传值
 <Child2 msg="hello" @some-event="onSomeEvent"></Child2>
 //Child2做展开
 <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
 //Grandson使⽤
 <div @click="$emit('some-event', 'msg from grandson')">
  	{{msg}}
 </div>

好啦，就写这么多，感谢阅读~