我在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
分享 0
回答2
最佳
-
这里是我一开始理解有问题,<component>的is属性官网是这样说的:
已注册组件的名字: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