vue组件嵌套达到继承模板的效果，三步骤

最新推荐文章于 2025-09-03 11:15:11 发布

原创最新推荐文章于 2025-09-03 11:15:11 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何通过Vue组件的嵌套，达到类似模板继承的效果，只需三步即可实现：1. 设计父组件的抽象基类；2. 创建子组件并利用slots扩展父组件模板；3. 在应用中实例化子组件，完成定制化内容的注入。这种模式有助于代码复用和组件结构的清晰。

<template>



  <div>
    <zuocelan></zuocelan>
第一步导入完成这个文件后，第二步操作在div里写文件名标签


    <main class="" id="main-collapse">
      <div>

      <jicheng></jicheng>
        课程详情页


      </div>

    </main>





  </div>
</template>



<script>


import zuocelan from './zuocelan.vue'
import jicheng from './jicheng'

第一步新建一个vue子模板文件，里面写你需要的东西，然后import在父模板里(注：需要引入的模板里导入子模板)导入这个文件

export default {
  data () {
    return {
      msg: "这是一个变量"
    }
  },
  components: {
        'zuocelan':zuocelan,
        'jicheng':jicheng
        第三步操作

  },
  mounted:function(){


},
  methods:{
      changetest(index){
          this.clicked = index;
      }
  }
}


</script>

<style>



</style>