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

回答2

最佳
  • @

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

    image.png

    已注册组件的名字:components属性里面的属性名(String)
    一个组件对象:就是import的名字

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

    支持 0 反对 0 举报
    2021-11-27 08:42
  • @

    报错是因为作用域问题

    <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