コンポーネントを機能させようとしています。配列にコンポーネント名を入れ、コンポーネントを非同期としてインポートしてから、どういうわけか変数をapp.componentに入れたいと思います。私はここで約6時間試しましたが、理解できません。私は50倍持っている必要はありません、インポートと50倍app.componentをコンポーネントごとに、それは私のために仕事に望んでいない私はおそらく何かを明らかに不足しています。残念ながら、私はJSがあまり得意ではありません。
main.js
import { createApp, defineAsyncComponent } from "vue";
import App from "./App.vue";
import router from "./router";
var subComponents = new Array([
"test",
"test2"
]);
subComponents.forEach(subComponent => {
subComponent = defineAsyncComponent(() =>
import(`@/components/sub/${subComponent}.vue`)
)
});
const app = createApp(App);
app.use(router);
app.component(subComponent, subComponents);
app.mount("#app");
これらの問題を報告します
コンポーネントの解決に失敗しました：テスト
コンポーネントの解決に失敗しました：test2
必要なのは、次のようにループ内で各コンポーネントを個別に登録することだと思います。
subComponents.js：
const subComponents = ['test', 'test2'];
export { subComponents }
main.js：
import { createApp, defineAsyncComponent } from 'vue';
import App from './App.vue';
import router from './router';
import { subComponents } from './subComponents';
const app = createApp(App);
subComponents.forEach(subComponent => {
const component = defineAsyncComponent(() => import(`@/components/sub/${subComponent}.vue`));
app.component(subComponent, component);
});
app.use(router);
app.mount('#app');
現時点では、存在しないsubComponent変数を最初の引数としての単一のインスタンスに渡しapp.component、配列を2番目の引数として渡します。
app.component 単一のコンポーネントに使用する必要があります。最初の引数はコンポーネントの名前で、2番目の引数はコンポーネント自体です。
したがって、名前の配列をループし、その名前を使用して各コンポーネントをインポートしてから、名前とインポートされたコンポーネントを使用してコンポーネントを登録すると、アプリ全体で使用できるようになります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加