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

最新推荐文章于 2024-07-26 13:02:41 发布

HiZhg

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量7.6k

点赞数

分类专栏： vue 文章标签： vue slot 组件复用继承

本文链接：https://blog.csdn.net/oLianyou1/article/details/79226281

版权

本文探讨如何利用Vue的slot实现模板继承和复用，通过创建基础组件并利用内容分发减少重复代码。文章介绍了相关Vue API，如slot、props和监听器，并给出简单的代码实例，展示如何在子组件中通过slot插入个性化内容。同时，作者对将复杂逻辑放入公共组件可能带来的问题进行了思考。

摘要由CSDN通过智能技术生成

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

知识储备Vue API
- slot 内容分发
- props 父子组件间传值
- vm.$emit 监听器回调
思路
- 要实现很好的继承组件必须把最相同部分提出来作为一个base组件，实现高可复用，不同部分使用slot进行内容分发
- 子组件在slot插槽中实现自己不同与父组件的内容

简单的代码实现

Base组件

<template>
  <!--比如这个元素在多个页面使用，我们可以抽出来一个base组件，然后其他页面就可以选择继承这个组件。
  然后在slot里定制自己当前页面需要显示的内容-->
  <div>
    <p class="head">T

关注

专栏目录