Vue 模版继承复用之slot内容分发

2023-09-09 07:51| 来源: 网络整理| 查看: 265

思考

前段时间学习django，发现django的模版继承挺好用，然后想着怎么能实现类似与django这种效果。怎么把所有页面中相同的元素做一次封装，然后减少重复代码的书写？怎样才能实现一个可继承，抽象的组件方式。查看了官方api之后发现了有个slot内容分发，然后想着能不能使用这种方式做封装。

行动知识储备Vue API slot 内容分发props 父子组件间传值vm.$emit 监听器回调思路思路图谱

要实现很好的继承组件必须把最相同部分提出来作为一个base组件，实现高可复用，不同部分使用slot进行内容分发子组件在slot插槽中实现自己不同与父组件的内容

简单的代码实现

Base组件

The Simple Demo

export default { } .head { font-size: 18px; text-align: center; }

子组件

tab1 tab2 tab3 import BaseHead from './BaseHead.vue' export default { components: { BaseHead }, methods: { tabclick(val) { this.$emit('tab-item-click', val) console.log(val) } } } div.tab ul { list-style: none; padding: 0; margin: 0; width: auto; } div.tab ul li { float: left; } div.tab ul li a, div.menu ul li a:visited { background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 边框 */ color: #dde4ec; /* 文字颜色 */ display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 内部填充的距离 */ text-decoration: none; /* 不显示超链接下划线 */ white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到标签为止。 */ } /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */ div.tab ul li a:hover { background-color: #bfcbd6; /* 背景色 */ color: #465c71; /* 文字颜色 */ text-decoration: none; /* 不显示超链接下划线 */ } /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */ div.tab ul li a:active { background-color: #465c71; /* 背景色 */ color: #cfdbe6; /* 文字颜色 */ text-decoration: none; /* 不显示超链接下划线 */ }

展示页面

{{msg}} {{msg}} import SubTab from './SubTab.vue' export default { name: 'HelloWorld', components: { SubTab }, data () { return { msg: '我是内容0' } }, methods: { tabclick(val) { console.log(val) let msg = '我是内容' this.msg = msg + val } } } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }

代码解释：以上代码是一个基本案例，将公共部分提取然后再继承可以很大程度上减少重复代码。

再次思考

如果将复杂逻辑写入这种抽取出的公共组件，可能会造成很多的传值和监听器回调。暂时看到了Bus.js，不知道这种方式可不可行。

最后

刚开始写博客，可能写的有点乱。有错误欢迎大家指正，如有疑问大家可以留言如果我会的话我会一一解答。感谢大家的阅读。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章