我正在使用vue-loader来构建我的*.vue
单文件组件,但是在从另一个扩展单文件组件的过程中遇到了麻烦。
如果一个组件遵循规范export default { [component "Foo" definition] }
,我认为这只是导入这个组件的问题(就像我对任何子组件一样)然后export default Foo.extend({ [extended component definition] })
不幸的是,这不起作用。任何人都可以提供建议吗?
我正在使用vue-loader来构建我的*.vue
单文件组件,但是在从另一个扩展单文件组件的过程中遇到了麻烦。
如果一个组件遵循规范export default { [component "Foo" definition] }
,我认为这只是导入这个组件的问题(就像我对任何子组件一样)然后export default Foo.extend({ [extended component definition] })
不幸的是,这不起作用。任何人都可以提供建议吗?
经过一些测试后,简单的解决方案是确保导出一个Vue.extend()
对象,而不是一个普通对象,以用于任何被扩展的组件。
就我而言,基本组件:
import Vue from 'vue'
export default Vue.extend({ [component "Foo" definition] })
和扩展组件:
import Foo from './Foo'
export default Foo.extend({ [extended component definition] })
另一种可能性是extends
选项:
import Foo from './Foo'
export default { extends: Foo }
正确的方法是使用 mixins:http: //vuejs.org/guide/mixins.html
将 mixins 视为可以扩展的抽象组件。因此,您可以创建一个具有您想要在两者中具有的任何功能的 mixin,然后将其应用于您的每个组件。
我会避免使用 Vue 的“扩展”功能,仅仅是因为它是 Vue 的一个名称不佳的方法。它并没有真正扩展任何东西,而不是在继承的情况下。它所做的正是 mixin 所做的,它将两个组件合并在一起。它与模板代码无关,模板代码也不可扩展。“扩展” Vue 方法应该被称为“合并”。
无论如何,Vue 必须使用 DOM 的层次结构,因此它组成了 DOM。同样的想法应该统治你的证监会大楼。将组件混合用于基本行为,并根据需要将混合添加到组件中,同时将最小的公共部分组合成较大的部分,同时将模板代码保持在最低限度。在编写 SFC 时,您应该考虑“精简视图,考虑模型”。:)
从 Vue 3 开始,引入了 Composition API,使得跨组件共享状态变得非常容易。
与使用组件定义对象上的属性(例如data
、computed
、methods
等)来定义组件不同,Composition API 允许您创建一个setup
声明并返回这些属性的函数。
一个例子:
文件:useCounter.js
import { reactive, computed } from "vue";
export default function {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
});
function increment() {
state.count++
}
return {
count,
double,
increment
}
}
现在可以使用它的设置功能将计数器功能无缝地引入任何 Vue 组件:
文件:MyComponent.vue
<template>
<button @click="increment">
Count is: {{ count }}, double is: {{ double }}
</button>
</template>
<script>
import useCounter from "./useCounter";
export default {
setup() {
const { count, double, increment } = useCounter();
return {
count,
double,
increment
}
}
}
</script>
使用 Composition API 声明组件的主要好处之一是它使逻辑重用和提取变得非常容易。组合函数是通过使其功能模块化和可重用来扩展组件的最直接且无成本的方式。