vue 组件封装

优点：

1.提高代码复用性和开发效率；

2.减少代码冗余；

---

组件用法：

1. 引用

import FormDialog from '@/components/dialog/formDialog'

2. 注册

components: {
    FormDialog
},

3. 使用

 <FormDialog> </FormDialog>

组件要素：

1.属性：props属性（父传子：props:{data,type}），inheritAttrs属性（组件的根元素是否继承特性）

//子组件接收   
 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;
            },
        },
    },

2.事件：event（子组件触发父组件事件）

        优点：降低耦合性；防止各自的数据被污染

// 子组件方法：触发父组件方法，并传递参数data到父组件
handleSubmit(data){
    this.$emit('submitToParent', data)
}

// 父组件调用子组件
<child-component @submitToParent="parentSubmit"></child-component>
... ...
// 父组件中被触发的方法，接受到子组件传来的参数
parentSubmit(data){
    // 父组件的逻辑处理
}

3.插槽：slot（在子组件内添加新的内容）

子组件
<div class="child-btn">
    <!-- 具名插槽 -->
    <slot name="button"></slot>
    <!-- 匿名插槽（每个组件只能有一个） -->
    <slot></slot>
</div>
 
父组件
<child>
    <!-- 对应子组件中button的插槽 -->
    <button slot="button">slot按钮</button>
</child>

4. 子组件改变父组件的数据（子组件中修改父组件传来的值，父组件也会同步改变）

// 父组件要props传递给子组件的数据
data:{
    info:'父组件信息'
}
 
// 子组件
 <template id="lemon">
    <div>
        //当子组件点击change按钮改变数据的时候，父组件也会同步改变
        <button @click="change">点我</button>
        <p>{{data.info}}</p>
    </div>
</template>
... 子组件中省略部分无关代码 ...
props:['data'],
methods:{
    change(){
        this.data.info = '我被点了'
    }
}