vue2中,vue.extend使用场景

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

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

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

Vue.component('dynamic-component', {
    template: `<div ref="container"></div>`
    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: `
	                <div :style="{ backgroundColor: componentData.color }">
	                {{ componentData.label }}
	                </div>
	            `,
	            props: ['componentData']
            });
            const componentInstance = new ComponentClass({
	            propsData: {
	                componentData: this.componentsData[i]
	            }
            });
            componentInstance.$mount();
            this.$refs.container.appendChild(componentInstance.$el);
        }
    }
  },
);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值