Vue.js 中的 Extends 继承机制与组件复用实践
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<button @click="onClick">点击我</button>
</div>
</template>
<script>
export default {
extends: BaseComponent,
data() {
return {
title: '子组件标题',
description: '这是子组件的描述。'
};
},
methods: {
onClick() {
alert('按钮被点击。');
}
}
}
</script>这个例子中，我们定义了一个BaseComponent基类组件，它包含了一个可复用的onClick方法。然后我们创建了一个子组件，它通过extends: BaseComponent继承了基类的功能，并添加了特定的数据和模板内容。这样做可以极大地减少代码冗余和提高开发效率。
评论已关闭