Vue.extend使用场景

extend是Vue.js提供的一个构造器，用于创建一个组件的子类。它接受一个组件选项对象作为参数，并返回一个新的组件构造函数。
Vue.component是一个全局方法，用于注册全局组件。它接受两个参数，第一个参数是组件名称，第二个参数是组件选项对象。

extend用于在父组件内部创建一个子组件。通常，它在需要创建动态或局部组件时使用。父组件可以通过调用extend方法来创建子组件的实例。
Vue.component可以在任何Vue实例的范围内使用，包括全局和局部组件中。在全局组件注册后，它可以在整个应用程序中的模板中直接使用。

extend创建的组件是局部组件，它被限制在父组件的作用域内，只能在对应的父组件中使用。
总的来说，使用Vue.component注册的组件是全局的，可以在应用程序的任何地方使用，而使用extend创建的组件是局部的，只能在父组件中使用。你可以根据具体场景选择合适的方式来定义和使用组件。
Vue.component创建的组件是全局注册的，可以在整个应用程序中被使用。

Vue.component('dynamic-component', {
    template: `
`
    data() {
        return {
	        componentsData: [
	            { label: 'Component A', color: 'red' },
	            { label: 'Component B', color: 'blue' },
	            { label: 'Component C', color: 'green' }
	        ]
        };
    },
    mounted() {
        for (let i = 0; i < 3; i++) {
            const ComponentClass = Vue.extend({
	            template: `
	                

	                {{ componentData.label }}
	                
	            `,
	            props: ['componentData']
            });
            const componentInstance = new ComponentClass({
	            propsData: {
	                componentData: this.componentsData[i]
	            }
            });
            componentInstance.$mount();
            this.$refs.container.appendChild(componentInstance.$el);
        }
    }
  },
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32