在過去的 8 個月中，我們使用 vue 3 和類組件構建了一個專案，但由于它似乎不再維護，我們希望逐漸切換到組合 API，更準確地說是切換到設定腳本語法.
我們目前使用的是 vue3.0.0 和 vue-class-components 8.0.0。
我們的目標是，因為我們必須不斷向專案添加新功能，開始使用組合 API 創建新組件，同時保留那些已經使用 vue 類組件撰寫的組件。而且，隨著我們的進行，我們將嘗試使用組合 API 重寫它們。
我嘗試使用 vue 類組件創建一個簡單的 HelloWorld 組件：
<template>
<div>
<TestComponent :test="'test string'" />
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import TestComponent from './TestComponent.vue';
@Options({
components: { TestComponent }
})
export default class HelloWorld extends Vue {
}
</script>
并添加一個測驗組件：
<template>
<h1>Test composant {{ test }}</h1>
</template>
<script lang="ts">
export default {
name: 'TestComponent',
props: { test: String, required: true },
setup(props: { test: string }, context: unknown) { console.log(context); return { test: props.test } }
}
</script>
但是，我在我的代碼中發現了一個錯誤：在 HelloWorld 中宣告 TestComponent 時，編譯器告訴我他期待在 TestComponent 中宣告的引數“test”：
Argument of type '{ name: string; props: { test: StringConstructor; required: boolean; }; setup(props: { test: string; }, context: unknown): { test: string; }; }' is not assignable to parameter of type 'Component<any, any, any, ComputedOptions, MethodOptions>'.
Type '{ name: string; props: { test: StringConstructor; required: boolean; }; setup(props: { test: string; }, context: unknown): { test: string; }; }' is not assignable to type 'ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any>'.
Type '{ name: string; props: { test: StringConstructor; required: boolean; }; setup(props: { test: string; }, context: unknown): { test: string; }; }' is not assignable to type 'ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}>'.
Types of property 'setup' are incompatible.
Type '(props: { test: string; }, context: unknown) => { test: string; }' is not assignable to type '(this: void, props: Readonly<LooseRequired<any>>, ctx: SetupContext<any>) => any'.
Types of parameters 'props' and 'props' are incompatible.
Property 'test' is missing in type 'Readonly<LooseRequired<any>>' but required in type '{ test: string; }'.ts(2345)
TestComponent.vue.ts(5, 18): 'test' is declared here.
更新： 我嘗試在main.ts中全域注冊TestComponent，但錯誤仍然相同
有沒有辦法讓兩者一起作業？
uj5u.com熱心網友回復：
請注意，這:test是 for 的語法糖v-bind:test，這意味著如果您沒有反應性變數系結 for :test，則應test改用。見下文：
// note there is no colon before test, which means you are just passing a constant string.
<TestComponent test="test string" />
uj5u.com熱心網友回復：
一個問題是您的props宣告不正確。它應該是：
// ? invalid
// props: {
// test: String,
// required: true
// },
props: {
test: {
type: String,
required: true
}
},
此外，您不需要輸入 的引數setup()，因為它們通常是從defineComponent()實用程式中推斷出來的，這可以在 Vue 組件中進行型別推斷：
// export default {
// setup(props: { test: string }, context: unknown) { /*...*/ }
// }
import { defineComponent } from 'vue'
export default defineComponent({
setup(props, context) { /*...*/ }
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364162.html
標籤：Vue.js Vuejs3 vue-composition-api Vue 类组件
上一篇：使用v-for的順序串列
下一篇：如何計算方法中的變異資料？