vue3组件封装

组件编写

// test.vue
<template>
    <div>
        tests {{ word }}
    </div>
</template>
<script>
export default {
    name: 'Test',
    props: {
        word: {
            type: String,
            default: ''
        }
    },
    setup() {
        const testFun = () => {
            console.log('test--->')
        }
        return {
            testFun
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

重点

// index.js
import Test from './test.vue'
import { createVNode, render } from 'vue'
const TestFun = (options) => {
    const modelDom = document.body.querySelector('.test_custom')
    if (modelDom) {
        document.body.removeChild(modelDom)
    }
    // options.isFlag = true
    const container = document.createElement('div')
    container.className = 'test_custom'
    const vm = createVNode(Test, options)
    render(vm, container)
    document.body.appendChild(container)
}

const _Test = {
    install: (app) => {
        app.component(Test.name, Test)
        app.config.globalProperties.$test = TestFun
    }
}

然后main.js中引入

// 省略。。。
import Test from '@/components/Test'
// ....
app.use(Test)

使用

// ...
setup () {
  onmounted(() => {
    _this.$test({word: '商'})
  })
}