コンポーネントを動的にインポートする方法

コンポーネントを動的にインポートする方法

---

序文

ページに多くのコンポーネントをインポートする必要があり、各コンポーネントが独立している場合は、何度も入力する必要がないように、動的コンポーネントの使用を検討できます。

---

1.html部分

まず、HTML 部分でコンポーネント タグを使用し、動的コンポーネントに指定した値 (文字列型) をバインドします。

<component :is="component.name"></component>

2.js部分

まず最初に、動的コンポーネントがどれほど動的であってもソースが必要であることを理解する必要があるため、参照する必要があるコンポーネントをインポートして登録する必要もあります。コンポーネント b にインポートしたいので、コンポーネント b にインポートする必要があります。まずインポートして登録し、次にコンポーネントを取得して作成する必要があるコンポーネントを取得するメソッドを作成します。

import a from './a.vue'; // 具体看你需要导入的组件
export default {
    
    
	component: {
    
    a},
	data() {
    
    
		return {
    
    
			component: {
    
    },
		}
	},
	// 具体位置看你需要在哪里导入
	created() {
    
    
		var name = 'a'; // 这个a是我想导入的组件，所以赋值a，若是从后端获取，则修改为后端获取的值即可
		var myComponent =() => import('./components/' + name + '.vue');
		this.component={
    
    
			name:name,
			component:myComponent
		}
	}
}

ここまでで完了できます

requireメソッドもありますので次回追加します

---

注意点

コンポーネントがどれほど動的であっても、常にソースが存在するため、インポートとコンポーネントの手順を記述する必要があります。そうしないと、コンポーネントはソースを見つけることができません。