vue3.0编写组件

首先编写vue组件

<template>
  <div v-show="open">
    {{open}}
    <h2 @click="getDetail">{{title}}</h2>
  </div>
</template>
<script>
import {toRefs,watch,computed,ref,reactive,onMounted} from 'vue'
export default{
  name:'msg',
  props:{
    title:String,
    show:Boolean
  },
  emits: [
      'update:show'
  ],
  setup(props,ctx){
    const data = reactive({
      open:false
    })
    onMounted(() => {
      if(props.show) {
          open();
      }
    })
    //检测props中的数据，进行展示和隐藏
    watch(() => props.show,(val)=>{
      if(!val){
        close()
      }else {
        open()
      }
    })
    const open = ()=>{
      data.open = true
    }
    const close = ()=>{
      data.open = false
    }
    const methods = {
      getDetail(){
        data.open = false
      }
    }
    return {
      ...toRefs(data),
      ...methods
    }
  }
}
</script>  

js文件的编写

import { provide,inject,App,createVNode,render,createApp} from 'vue'
import msg from '../components/plugins/msg.vue'
const message = function(options){
  const modelDom=document.body.querySelector(`.mountNode`)
  if(mountNode){
    document.body.removeChild(modelDom)
  }
  let mountNode=document.createElement('div')
  mountNode.className='mountNode'
  //创建虚拟节点
  const vm=createVNode(msg,options)
  // 渲染虚拟节点
  render(vm,mountNode)
  document.body.appendChild(mountNode)
  // 这个是另外一种渲染方法
  // const app = createApp(msg, {
  //     ...options, modelValue: true
  // }).mount(mountNode)
  // return app
}
export default {
  install(app){
  // 官方推荐的写法
    app.provide('$message', message)
    // app.config.globalProperties.$message = message
  }
}

main.js中引入

app.use(message)

在对应需要引入的文件中

$message({
  show:true,
  title:'qqw'
})

相关参考文章
vue3分享 组件创建方法 vue自定义pop组件