组件化的核心思想

如果我们将一个应用程序所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
并且在真实开发中，我们会有很多的内容和代码逻辑，项目扩展性和可维护性是非常差的；
所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。

所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；再将这些组件组合嵌套在一起，最终形成我们的应用程序；

我们可以按照如下的方式进行拆分：

image.png

按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可

组件的通信

在开发过程中，我们会经常遇到需要组件之间相互进行通信,根据组件之间的关系可以分为父子组件通信和非父子组件通信。
在一个Vue项目中，组件之间的通信是非常重要的环节，所以接下来我们就具体学习一下组件之间是如何相互之间传递数据的；

父子组件之间通信的方式

父子组件之间如何进行通信呢？

• 父组件传递给子组件：通过props属性；
• 子组件传递给父组件：通过$emit触发事件；
  image.png

父组件传递给子组件

在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：
这个时候我们可以通过props来完成组件之间的通信；

什么是Props呢？

• Props是你可以在组件上注册一些自定义的attribute；
• 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；

Props有两种常见的用法：

1. 字符串数组，数组中的字符串就是attribute的名称；
2. 对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等；

Props的数组用法

子组件ShowMessage.vue

<template>
  <div>
    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  //注册自定义的属性
  props: ['title', 'content']
}
</script>

在父组件App.vue中导入、注册、使用子组件ShowMessage.vue

<template>
  <div>
    <!--父组件在使用子组件的时候，给子组件在组件内部注册的自定义属性赋值-->
    <show-message title="天气预报" content="暴雨黄色预警，请注意防范！"/>
    <show-message :title="title" :content="content"/>
    <!-- 一次性把对象中的所有属性名和属性值绑定到组件上 -->
    <show-message v-bind="info"/>
    <show-message :="info"/>
  </div>
</template>

<script>
import ShowMessage from '@/component/ShowMessage.vue'
export default {
  components: {
    ShowMessage
  },
  data() {
    return {
      title: '天气预报',
      content: '暴雨黄色预警，请注意防范！',
      info: {
        title: '天气预报',
        content: '暴雨黄色预警，请注意防范！',
      }
    }
  }
}
</script>

Props的对象用法

数组用法中我们只能说明注册的attribute的名称，并不能对属性的值进行任何形式的限制，下面来看下对象的用法是如何让我们的props变得更加完善的。
当使用对象语法的时候，我们可以对子组件注册的自定义属性的值进行限制：

• 比如指定传入的attribute的类型；
• 比如指定传入的attribute是否是必传的；
• 比如指定没有传入时，attribute的默认值；

子组件ShowMessage.vue

<template>
  <div>
    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  //注册自定义的属性：对象写法
  props: {
    title: String, //值为字符串，只能对属性值的类型限制
    content: { //值为对象，可以对属性值的类型，是否必传，默认值进行限制
      type: String, //指定值的类型
      required: true, //是否必传
      default: '内容。。。' //默认值
    }
  }
}
</script>

对象中属性的值

• 可以是字符串，只能指定自定义属性的属性值的类型，
• 也可以是对象，可以对自定义属性的属性值的类型，是否必传，默认值进行限制

那么type的类型都可以是哪些呢？

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

对象类型的其他写法

<script>
export default {
  //注册自定义的属性：对象写法
  props: {
    messageInfo: String, //值为字符串，只能对属性值的类型限制
    propA: Number,
    propB: [Number, String], //多个可能的类型
    content: { //必填的字符串
      type: String, //指定值的类型
      required: true, //是否必传
    },
    propC: {//带有默认值的数字
      type: Number,
      default: 10
    },
    propD: {//带有默认值的对象
      type: Object,
      default: () => {//对象或数组类型的默认值必须从一个工厂函数中返回
        return {message: 'hello'}
      }
    },
    propE: {
      validator(value) {//对自定义属性的值进行校验，使用validator函数，
      //符合校验规则返回true,不合法返回false，不合法校验规则，会在控制台报警告
        return ['success', 'warning', 'danger'].inclueds(value)
      }
    },
    propF: {//带有默认值的函数
      type: Function,
      default: () => {//与对象或数组类型的默认值不同，者不是一个工厂函数，这是一个用作默认值的函数
        return 'default function'
      }
    },
  }
}
</script>

Prop 的大小写命名

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符；
当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名；

子组件ShowMessage.vue

<template>
  <div>
    <h2>{{title}}</h2>
    <p>{{articleContent}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String, 
    articleContent: { //属性名为小驼峰命名
      type: String,
      required: true,
      default: '内容。。。' 
    }
  }
}
</script>

在父组件App.vue中导入、注册、使用子组件ShowMessage.vue

<template>
  <div>
    <!--父组件在使用子组件的时候，给子组件绑定属性名的时候，使用短横线连接-->
    <show-message :title="title" :article-content="content"/>
  </div>
</template>

<script>
import ShowMessage from '@/component/ShowMessage.vue'
export default {
  components: {
    ShowMessage
  },
  data() {
    return {
      title: '天气预报',
      content: '暴雨黄色预警，请注意防范！',
    }
  }
}
</script>

非Prop的Attribute

当我们传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为 非Prop的Attribute；常见的包括class、style、id属性等；

Attribute继承

当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中：

image.png
如果我们不希望组件的根元素继承非Prop的Attribute，可以在组件中设置 inheritAttrs: false：

• 禁止组件的根元素继承非Prop的Attribute的常见情况是：需要将非Prop的Attribute应用于组件根元素之外的其他元素；
• 我们可以通过 $attrs来访问所有的 非props的attribute；

案例：

子组件ProductList.vue

<template>
  <div>
    <!--在组件内部获取非props注册的属性中的class属性的值,绑定到非组件根元素h1上-->
    <h1 :class="$attrs.class">我是标题</h1>
    <!--在组件内部获取非props注册的所有属性一次性绑定到非组件根元素div上-->
    <!--$attrs为一个对象，存储着当前组件非props注册的所有属性-->
    <div v-bind="$attrs">副标题</div>
    <p v-for="i in proList" :key="i">{{ i }}</p>
  </div>
</template>

<script>
export default {
  inheritAttrs: false, //禁止根节点继承非props属性
  props: {
    proList: {
      type: Array,
      default() {
        return ["1", "2", "3"];
      },
    },
  },
};
</script>

<style scoped></style>

父祖件App.vue

<template>
  <div>
    <!--id,class为ProductList.vue子组件非props注册的属性-->
    <product-list id="list" class="coder" :pro-list="['雪糕', '棒棒冰']"></product-list>
  </div>
</template>

<script>
  import ProductList from './ProductList.vue'
  export default {
    components: {
      ProductList
    }
  }
</script>

多个根节点的attribute

如果子组件有多个根节点，此子组件的的非props注册的属性没有显示的绑定，那么会报警告，我们必须手动的指定要绑定到哪一个属性上

案例：

子组件ProductList.vue

<template>
   <!--在组件内部获取非props注册的属性中的class属性的值,指定绑定到组件根元素h1上-->
   <h1 :class="$attrs.class">我是标题</h1>
   <p v-for="i in proList" :key="i">{{ i }}</p>
</template>

<script>
export default {
  props: {
    proList: {
      type: Array,
      default() {
        return ["1", "2", "3"];
      },
    },
  },
};
</script>

<style scoped></style>

父祖件App.vue

<template>
  <div>
    <!--class为ProductList.vue子组件非props注册的属性-->
    <product-list class="coder" :pro-list="['雪糕', '棒棒冰']"></product-list>
  </div>
</template>

<script>
  import ProductList from './ProductList.vue'
  export default {
    components: {
      ProductList
    }
  }
</script>

子组件传递给父组件

什么情况下子组件需要传递内容到父组件呢？

• 当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；
• 子组件有一些内容想要传递给父组件的时候；

我们如何完成上面的操作呢？

• 首先，我们需要在子组件中通过emits属性注册在某些情况下触发的事件名称；
• 其次，在父组件中以v-on的方式监听对应的事件名称，并且绑定事件触发时要触发的方法；
• 最后，在子组件中发生某个事件的时候，通过this.$emit发射事件名称，在父组件中监听到对应的事件，触发绑定的方法；

例

我们封装一个CounterOperation.vue的组件：
内部其实是监听两个按钮的点击，点击之后通过 this.$emit的方式发出去事件；
子组件CountOptions.vue

<template>
  <div>
    <button @click="add">+1</button>
    <button @click="sub">-1</button>
  </div>
</template>

<script>
  export default {
    //1.注册子组件要发射的事件
    emits: ['add', 'sub'], 
    methods: {
      add() {
        //2.子组件向父组件发射事件
        this.$emit('add')
      },
      sub() {
        this.$emit('sub')
      },
    }
  }
</script>

父组件App.vue

<template>
  <div>
    数量: {{count}}
    <!--父组件在使用子组件时，对子组件将要发射的事件进行监听，并绑定监听到事件发生时要触发的方法-->
    <count-options @add="addOne" @sub="subOne" ></count-options>
  </div>
</template>

<script>
  import CountOptions from './CountOptions.vue'
  export default {
    components:{
      CountOptions
    },
    data() {
      return {
        count: 5
      }
    },
    methods: {
      addOne() {
        this.count++
      },
      subOne() {
        this.count--
      }
    }
  }
</script>

自定义事件的时候，我们也可以传递一些参数给父组件：

子组件CountOptions.vue

<template>
  <div>
    <input type="text" v-model.number="num"/>
    <button @click="addN">+{{num}}</button>
  </div>
</template>

<script>
  export default {
    //先注册要发射的事件
    emits: [ 'addN'], 
    data() {
      return {
        num: 10
      }
    },
    methods: {
      addN() {
        //子组件在向父组件发射事件时可以携带一个到多个参数
        this.$emit('addN', this.num, 'coder', 18)
      }
    }
  }
</script>

父组件App.vue

<template>
  <div>
    数量: {{count}}
    <count-options @addN="addNum"></count-options>
  </div>
</template>

<script>
  import CountOptions from './CountOptions.vue'
  export default {
    components:{
      CountOptions
    },
    data() {
      return {
        count: 5
      }
    },
    methods: {
      addNum(num, age,height) {
        this.count += num
        console.log(age, height)
      }
    }
  }
</script>

在vue3当中，我们可以对传递的参数进行验证：

子组件CountOptions.vue

<template>
  <div>
    <button @click="add">+1</button>
    <button @click="sub">-1</button>
    <div>
      <input type="text" v-model.number="num"/>
      <button @click="addN">+{{num}}</button>
    </div>
  </div>
</template>

<script>
  export default {
    //先注册要发射的事件
    emits: {//emits写成对象是为了校验参数类型
      add:null, //不需要校验参数
      sub: null,
      addN: (num, age, height) => {//如果参数校验不成功，父组件中绑定的方法依然可以接收到参数，只不过控制泰会报警告
        if(num > 10) {
          return true //返回true说明校验成功
        }
        return false //返回false说明校验失败
      }
    },
    data() {
      return {
        num: 10
      }
    },
    methods: {
      add() {
        this.$emit('add')
      },
      sub() {
        this.$emit('sub')
      },
      addN() {
        this.$emit('addN', this.num, 'coder', 18)
      }
    }
  }
</script>

此文档主要内容来源于王红元老师的vue3+ts视频教程