公共模板组件封装目的
通过公共模板组件封装,实现公共部分业务的代码复用,减少不必要的重复开发,减轻开发工作,同时可以避免重复造轮子的尴尬。
封装所需技术点
- 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>
本文原创,原创不易,如需转载,请联系作者授权。