vue为什么这种情况组件不用注册就能用？_前端问题_站长_知道

我在A组件里面import Com1组件
然后将引入的Com1组件传入自定义插件$toast

import Com1 from './Com1.vue'
export default {
    mounted() {
        this.$toast.show(Com1)
    }
}
</script>

自定义插件主要这样写的

// toast/index.js
import ToastComponent from './toast.vue'
const ToastConstructor = Vue.extend(ToastComponent)

Toast.install = (Vue) => {
    Vue.prototype.$toast = {
        show(com) {
            const instance = new ToastConstructor()
            instance.$mount()
            document.body.appendChild(instance.$el)

            instance.show = true
            instance.com = com
        }
    }
}

//toast/toast.vue
<template>
    <div id="toast">
        <div v-show="show">
            <component :is="com"></component>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            com: '',
            show: false
        }
    }
}
</script>

然后现在情况就是可以正常显示传入插件的Com1组件，我想知道为什么不用注册这个组件就能直接显示呢？

我尝试在A组件里面不在components属性里面注册直接使用
<Com1></Com1> 或者 <component :is="Com1"></component> 都会报错，但是为什么传入插件之后也没有注册但是却可以正常显示呢？

已解决悬赏分：20 - 解决时间 2021-11-27 23:39

点赞 0反对 0举报 0 收藏 0

回答2

最佳

@aspasp

这里是我一开始理解有问题，<component>的is属性官网是这样说的：

已注册组件的名字：components属性里面的属性名（String）
一个组件对象：就是import的名字

也就是说<component>的is本来就是可以直接传一个组件对象的。跟组件注册没啥关系。

支持 0 反对 0 举报

2021-11-27 08:42

@690865

报错是因为作用域问题

<template>
    <div>{{name}}</div>
</template>

<script>
    const name = 123
</script>


你说这可以吗
你这个例子真实是这样的：
<template>
    <component :is="com"></component>
</template>

<script>
import Com1 from './Com1.vue'
default export {
    data() {
        return {
            com: null
        }
    },
    mounted() {
        this.com = Com1
    }
}
</script>




 
支持 0
反对 0
举报


                            
                                2021-11-27 10:00