Vue组件化

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

一、组件化

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

组件通信方式

1. props 父组件传给子组件，这里需要注意的是如果子组件写了default默认值并且子组件通过props里的字段判断是否存在就会有问题，所以需要用到props中的字段进行判断的时候，注意不要写default

   //父组件:
   <Button :name='name' :handerAdd='handlerAdd' />
   //子组件
   props: {
       name: {        type: String    },    handleAdd: {        type: Function    }}
   

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

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

3. 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');
   

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

边界情况

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

1. parent/parent/parent/root 用于兄弟组件之间通信，parent父组件，parent父组件，parent父组件，root是根实例，可以通过共同祖辈进行搭桥

   //兄弟组件1
   this.$parent.$on('count', handle);
   //兄弟组件2
   this.$parent.$emit('count');
   

2. **children∗∗父组件可以通过children** 父组件可以通过children∗∗父组件可以通过children来访问子组件的数据，实现了父子通信，但是$children不能保证子元素的顺序（因为有异步的组件）

   //父组件
   this.$children[0].count = 'count';
   

3. refs获取子节点引用，和refs 获取子节点引用，和refs获取子节点引用，和children的区别是refs只要定义了就可以拿到什么节点都可以，refs只要定义了就可以拿到什么节点都可以，refs只要定义了就可以拿到什么节点都可以，children必须是自定义组件

   //父组件
   <Button ref='btn' />
   
   mouted() {
       this.$refs.btn.xx = 'xxx';
   }
   

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

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

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

6.  //$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>
   

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