通过选项 API,我们可以使用这些方式来扩展组件。假设我们有 2 个组件。
组件1.vue
<script>
export default {
methods: {
init(message) {
alert(message)
}
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
Component2.vue
<script>
import Component1 from './Component1'
export default {
extends: Component1,
methods: {
showAlert() {
// we can access Component1 'init()' method here
this.init('Hello World!')
}
},
mounted() {
this.showAlert()
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
现在,如何让它与组合 API 一起工作?我已经检查过该extends属性在文档中仍然可用,但没有明确的使用说明。
https://v3.vuejs.org/api/options-composition.html#extends
考虑以下带有组合 API 的代码。
组件1.vue
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const init = (message) => …Run Code Online (Sandbox Code Playgroud)