Vue实现公共模板组件的封装、数据传值、方法执行等，以及实现公共模板组件自定义修改（插槽封装）

公共模板组件封装目的

通过公共模板组件封装，实现公共部分业务的代码复用，减少不必要的重复开发，减轻开发工作，同时可以避免重复造轮子的尴尬。

封装所需技术点

• props：父子 prop 之间形成了一个单向下行绑定数据流，以及数据验证。
• $emit：触发父组件的方法。
• slot：元素作为组件模板之中的内容分发插槽。slot 元素自身将被替换。
• 公共模板组件全局注册：公共模板组件使用的前提。

备选改造升级技术点

• watch：监听传入公告模板组件的数据。
• ref：执行公共模板组件的方法

公共模板组件封装

1、公共模板组件封装

<template>
    <div class="tzc_group_bt">
        <slot name="content" >
            <div class="tzc_group_header">
                <i :class="myvalue.icon" :style="{'color':myvalue.color}"></i>
                <p :style="{'color':myvalue.color2,'border-bottom':`2px solid ${myvalue.color}`}">{
    
    {
    
     myvalue.name }}</p>
            </div>
            <div class="tzc_group_more" @click="OnS()" :style="{'color':myvalue.color3,'background':myvalue.color}">{
    
    {
    
    myvalue.more}}</div>
        </slot>
    </div>
</template>

<script>
export default {
    
    
    props: {
    
    
        myvalue: {
    
    
            default: {
    
    }
        },
    },
    data() {
    
    
        return {
    
    

        };
    },
    mounted() {
    
    

    },
    methods: {
    
    
        OnS() {
    
    
            this.$emit('onOpen');
        }
    },
};
</script>

2、公共模板组件全局注册（main.js或者main.ts）

//通过Vue.component进行全局注册
Vue.component('my-component-name', {
    
    
  // ... 选项 ...
})

3、公共模板组件的使用

<cp_pub_more :myvalue="myvalue" @onOpen="onGlist" >
     <!-- 插入自定义内容插槽，传值、方法失效 -->
     <template v-slot:content>
         <div>插入自定义内容</div>
     </template>
 </cp_pub_more>

本文原创，原创不易，如需转载，请联系作者授权。