컴포넌트를 동적으로 가져오는 방법

컴포넌트를 동적으로 가져오는 방법

---

머리말

페이지에서 많은 구성 요소를 가져와야 하고 각 구성 요소가 독립적인 경우 동적 구성 요소 사용을 고려할 수 있으므로 여러 번 채울 필요가 없습니다.

---

1. html 부분

먼저 html 부분에 component 태그를 사용하고 is 를 사용하여 스트링 타입인 동적 컴포넌트에 부여한 값을 바인딩합니다.

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

2. js 부분

일단 동적 컴포넌트가 아무리 다이내믹하더라도 소스가 필요하기 때문에 참조가 필요한 컴포넌트도 가져와서 등록해야 한다는 점을 이해해야 합니다. b컴포넌트에서 import를 하려고 해서 componentb에서 import를 해야합니다. 먼저 import import를 해서 등록을 한 후, 컴포넌트를 구해서 생성해야 하는 곳에 컴포넌트를 구하는 메소드를 작성합니다.

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 메서드도 있습니다.

---

주의점

구성 요소가 아무리 동적이더라도 항상 소스가 있으므로 가져오기 및 구성 요소 단계를 작성해야 합니다. 그렇지 않으면 구성 요소가 소스를 찾을 수 없습니다.