Vue3在<script setup>实现对组件的命名

535 阅读1分钟

1、创建一个 plugin.js

import { getCurrentInstance } from 'vue'

export default {
    // 第一个参数是 createApp 的全局实例,二是用户传入的选项
    install (app, options) {
        function setComponentName (name) {
            let instance = getCurrentInstance()
            instance.type.name = name
        }
        app.provide('setComponentName', setComponentName)
    }
}

2、main.js进行引入

import userPlugin from './plugin.js'
const app = createApp(App)

app.use(userPlugin)

3、组件内部使用

<script setup>
import { inject } from "vue"
let setComponentName = inject('setComponentName')
setComponentName('HelloWorld')
</script>

动动你发财的小手请点点赞。