vue3 には mixins と extends が用意されていますが、試してみたところ、これら 2 つのメソッドは純粋な OptionAPI のみをサポートしていることがわかりました。セットのデータは認識されますが、セット内の戻り値はリアクティブですセットアップが完全に無効であるため、セットアップは実行されません。
したがって、このメソッドは最初のメソッドでのみ使用できます。
公式が提供していないので、自分で方法を探しましょう。まずコンポーネント コードを観察してみましょう (2 番目のケース):
<template>
<!--模板-->
举例
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ui-core-',
components: {
// 注册共用组件
},
props: {
// 定义共用属性
},
setup(props, context) {
// 各种共用操作
_logger()
_setTitle()
// 共用成员
const foo = reactive ({})
return {
foo
}
}
})
</script>defineComponent メソッドはオブジェクトを受け取ります。このオブジェクトには、名前、コンポーネント、プロパティ、セットアップなどのいくつかの特定の属性が必要です。
言い換えれば、そのようなオブジェクトを返す関数を作成できます。
たとえば、最初に js (または ts) ファイルを作成しましょう:
export function base (name, callback) {
return {
name: 'ui-' + name,
components: {
// 注册共用组件
},
props: {
// 定义共用属性
},
setup(props, context) {
// 各种共用操作
_logger()
_setTitle()
// 共用成员
const foo = reactive ({})
// 执行其他操作
const re = callback(props, context)
return {
foo,
...re
}
}
}
}これはテンプレート モードに似ています。
名前とコールバック関数、プロパティ、コンテキストをパラメータとして渡します。内部メンバーをパラメータとして渡すこともできます。
このような単純な基底クラスが作成されましたが、関数では見栄えが悪いと思われる場合は、クラスに変更してください。
export default class BaseComponent {
name: string
components: any
props: any
setup: any
constructor (name: string, callback: (props: any, context: any) => any) {
this.name = name
this.components = {}
this.props = {}
this.setup = (props: any, context: any) => {
// 各种共用操作
_logger()
_setTitle()
// 执行其他操作
const re = callback(props, context)
return {
...re
}
}
}
}classを取得した後、サブクラスを設定することもできますが、少し面倒に感じます。要するに、とにかく達成できるということです。
上記のメソッドは純粋な合成 API もサポートしているはずですが、少し問題があります。defineProps とdefineEmits は通常の JS 関数ではなく、一種の「マクロ」です。 「。」
公式サイトの説明を引用:
definePropsとdefineEmitsは
著者別の最新記事
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
