组件编写
// 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: '商'})
})
}
