Vue组件的继承用法

2022-08-16 23:01:59 阅读：263 来源： 互联网

标签：Vue name title 继承 HelloWorld 用法基类组件

Vue组件的继承用法

vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据

基类案例：

<template>
  <div class="hello">
    父类:{{name}}
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      name:'末晨曦吖',
      title:'Vue组件的继承用法'
    }
  },
  mounted(){
    console.log('父组件',this.name);
  },
  methods:{
    handle(){
      console.log('我是父组件方法');
    }
  }
}
</script>

<style scoped>

</style>

继承基类案例：

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  extends:HelloWorld,
  data(){
    return {
      
    } 
  },
  mounted() {
    console.log("子类继承父组件name", this.name);
    this.handle()
    // this.title = '子组件更改了title'
  },
  components:{
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
 
</style>

效果：
在这里插入图片描述

可以看见，不改写基类的时候，继承了父类的所有东西，当前的data，dom，方法都继承了

改写父类案例：

<template>
  <div id="app">
    子组件：{{name}}
    <span>{{title}}</span>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  extends:HelloWorld,
  data(){
    return {
      
    } 
  },
  mounted() {
    console.log("子类继承父组件name", this.name);
    this.handle()
    this.name = '子组件更改了name'
    this.title = '子组件更改了title'
  },
  components:{
    
  },
  methods:{
    handle(){
      console.log('子组件改写方法');
    }
  }
}
</script>

<style scoped>
 
</style>

效果：
在这里插入图片描述
我们会发现，改写后基类的值也被覆写了，方法也被覆写了，html模板也完全被改写了

HTML模板要么完全继承，要么完全重写，不能按需继承某个部分。如果子类在结构上跟基类有所差异，还是需要在基类中做条件判断。如果模板差异太大，可以重新定义子类自己的template，至少还可以重用一部分业务逻辑代码。

标签：Vue,name,title,继承,HelloWorld,用法,基类,组件
来源： https://www.cnblogs.com/mochenxiya/p/16593312.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue组件的继承用法

Vue组件的继承用法