qq_53496572
ansinie
采纳率100%
2021-03-08 14:24

vue3.0没有this怎么调用挂载在dom上的组件?

已采纳

在vue2.0上我可以直接 this.$toast.toastShow('弹出框')  来使用这个弹出框

但是vue3.0在setup里写没有this啊,0.0

//挂载文件
import Toast from "@/components/common/toast/Toast";
import { createApp} from 'vue'
const  obj={}
obj.install=function (vm){
  const app=createApp
  const div =document.createElement('div')
  const toast = app(Toast).mount(div)
  document.body.appendChild(div)
  vm.config.globalProperties.$toast=toast
}

export default obj



//在main.js里安装使用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'


const app=createApp(App)
app.use(toast)
app.use(router)
app.mount('#app')


this.$toast.toastShow('弹出来了呀') //vue2.0中使用
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • qq_34086049 射手座男人 1月前

    首先vue2 插件的时候会暴露一个 install 方法,并通过全局方法 Vue.use() 使用插件。install 方法的第一个参数是 Vue 构造器,插件的方法就添加在 Vue 构造器的原型对象上。通过 new Vue() 实例化后,在组件中就能调用 this.$toas了。

    而在Vue3中install 传入的不是Vue的构造器没有原型对象,Vue.prototype是undefined 所以没办法直接通过this调用

    // 插件内容
    export default {
        install: (app: any, options: any) => {
            console.log(options)
            app.config.globalProperties.$toast = (name: any) => {
                // 插件逻辑
            }
        }
    }
    
    
    // main.js
    
    import { createApp } from 'vue';
    import App from './App';
    import toast from 'xxx/xxxx/toast'
    const app = createApp(App)
    app.use(toast).mount('#app')
    // 需要调用插件的组件
    
    export default defineComponent({
    
        setup() {
            
            const { proxy } = getCurrentInstance()
            const toast = proxy.$toast
            
            //使用
            toast()
        }
    })

    希望对你能有帮助

    点赞 1 评论 复制链接分享