Vue组件的继承用法示例详解
更新时间：2022年08月17日 09:42:07 作者：mochenxiya
这篇文章主要介绍了Vue组件的继承用法,本文通过实例代码案例讲解给大家介绍的非常详细，需要的朋友可以参考下
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组件的继承用法的文章就介绍到这了,更多相关Vue组件继承用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
浅谈element中InfiniteScroll按需引入的一点注意事项
这篇文章主要介绍了浅谈element中InfiniteScroll按需引入的一点注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了vue项目热更新的坑及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程,需要的朋友可以参考下2019-05-05
v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定.这篇文章主要介绍了VueJs中的V-bind指令,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Vue中使用import进行路由懒加载的原理分析。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
虚拟滚动或者移动是指禁止原生滚动,之后通过监听浏览器的相关事件实现模拟滚动,下面小编就来和大家详细介绍一下vue实现虚拟滚动的示例代码,需要的可以参考下2023-10-10
这篇文章主要介绍了vue-froala-wysiwyg 富文本编辑器功能，分步骤给大家介绍了vue3.中如何安装使用froala,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue.js中关于“{{}}”的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
详解如何将 Vue-cli 改造成支持多页面的 history 模式
本篇文章主要介绍了详解如何将 Vue-cli 改造成支持多页面的 history 模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要给大家介绍了关于vue实现防抖的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论