vue组件封装

1、封装组件的目的
把业务逻辑相同，高度重复的代码封装起来，为了提高代码的复用，减少代码的冗余。
2、组件使用
（1）引用

import navs from '@/views/nav/index'

（2）注册

components:{
   
  'v-nav':navs
}

（3）使用

< v-nav> < /v-nav>

3、组件三要素

属性：props属性 ，inheritAttrs属性
事件：event
插槽：slot

(1)属性：
数据从父组件传到子组件props属性
父对子传参，就需要用到 props，通常的 props 是这样的：

props:[‘data’,‘type’]

但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则,常用格式如下：

props:{
   
// 基础类型检测 (`null` 意思是任何类型都可以)
 propA: Number,
 // 多种类型
 propB: [String, Number]
  // 必传且是字符串
    propC: {
   
      type: String,
      required: true //必须传
    },
     // 数字，有默认值
    propD: {
   
      type: Number,
      default: 100  //default默认值，默认是100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
   
      type: Object,
      default: function () {
   
        return {
    message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
   
      validator: function (value) {
   
        return value > 10
      }
    }

inheritAttrs属性
vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。

举个例子来验证一下。

父组件 parent-component.vue

<template>
　<div class="parent">
    <child-component aaa="1111"></child-component>
  </div>
</template>
<script>
import ChildComponent from './child-component'
export default {
   
  components: {
   
    ChildComponent
  }
}
</script>

子组件 child-component.vue 设置 inheritAttrs: true（默认）

<template>
  <div class="child">子组件</div