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

公共模板组件封装目的

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

封装所需技术点

• 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: {}
        },
        lc_style:{
	      type: Object,
	      default:()=>({
	        backgroundColor: '#ffffff',
	        border_w:'1px',
	        content_Color:'black',
	        v_z_index:'0'
	      })
	    }
    },
    data() {
        return {

        };
    },
    mounted() {

    },
    methods: {
        OnS() {
            this.$emit('onOpen');
        }
    },
};
</script>
<style lang="less" scoped>
.tzc_group_bt {
  z-index: v-bind('lc_style.v_z_index');
  color: v-bind('lc_style.content_Color');
  background-color: v-bind('lc_style.backgroundColor');
  color: v-bind('lc_style.content_Color');
}
</style>

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

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

3、公共模板组件的使用

<cp_pub_more 
				:myvalue="myvalue" 
				@onOpen="onGlist" 
				:lc_style="{
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    border_w:'0px',
                    content_Color:'#fff',
                    v_z_index:'3'
                }">
     <!-- 插入自定义内容插槽，传值、方法失效 -->
     <template v-slot:content>
         <div>插入自定义内容</div>
     </template>
 </cp_pub_more>

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