允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数),和mixins有点类似。
在 Vue.js 2.x 中,extends API 可以用于混合一个对象到组件的选项中。它可以很方便地将多个对象混合成一个对象,并传递给 Vue.js 组件。语法如下:
Vue.component('my-component', {extends: someComponent,// 组件选项
})
其中 someComponent 是要被混合的对象,可以是另外一个 Vue.js 组件或一个普通的 JavaScript 对象。通过 extends API 的方式,我们可以将多个组件混合在一起,从而实现一些代码逻辑和功能的复用。
需要注意的是,使用 extends API 时,不应该在被扩展的对象上定义 data 选项,因为该选项应该是一个方法。如果定义了 data 选项,则会导致所有实例共享同一个数据对象,这不是我们所期望的结果。
举个例子,下面示例代码展示了如何通过 extends API 来扩展一个组件:
<!-- 父组件 -->
<template><div><h1>{{ title }}</h1><p>{{ content }}</p></div>
</template>
<script>
export default {data() {return {title: 'Hello World!',content: 'This is a sample component.'}}
}
</script>
<!-- 子组件 -->
<template><div><h2>{{ subtitle }}</h2><p>{{ subcontent }}</p></div>
</template>
<script>
export default {extends: ParentComponent,data() {return {subtitle: 'Sub Title',subcontent: 'This is a sub content.'}}
}
</script>
在上面的代码中,我们将 ParentComponent 组件混合到 ChildComponent 中,并定义了一个新的 data 方法,用于添加子组件的数据选项。这样,我们就可以在 ChildComponent 中使用 ParentComponent 的模板和方法,同时也添加了子组件自己独有的数据。