vue3+element plus + js封装自定义弹框组件

vue3+element plus+js封装自定义弹框组件

vue3和vue2封装组件是不同的，vue3的双向绑定是proxy，用的是代理，所以封装组件不能按照vue2那样传值

下面是我自己封装的一个弹框组件，希望能帮到各位伙伴，因为公司搭建的框架是依据js的，所以尽管我们用vue3开发，也没有用ts

父组件

template内容

<el-button @click="dia">编辑</el-button>
<el-button @click="dia2">新增</el-button>
<ComponentAddUpdate :addUpdateData="state.addUpdateData" @submit="submitData"></ComponentAddUpdate>

js内容

import ComponentAddUpdate from '../workplace/components/add-update.vue'
export default {
	components: {
    	ComponentAddUpdate,
	},
	setup(){
		// 必须按照这种方式进行传值，不然修改diaVisible值并不会进行双向绑定
		let state = reactive({
              addUpdateData: {}
        })
        function dia() {
              state.addUpdateData = {title: '编辑组织',diaVisible: false,options:{
					name: "一枕星梦河"
			  }}
              state.addUpdateData.diaVisible = true
              console.log(state.addUpdateData.diaVisible)
        }
        function dia2() {
              state.addUpdateData = {title: '新增组织',diaVisible: false,options:{}}
              state.addUpdateData.diaVisible = true
              console.log(state.addUpdateData.diaVisible)
        }
        function submitData(addUpdateData){
              console.log(addUpdateData)
              state.addUpdateData.diaVisible = false
        }
        return {
              state,
              submitData,
              dia,
              dia2,
        }
	}
}

子组件

template内容

<el-dialog
    :title="addUpdateData.title"
    v-model="addUpdateData.diaVisible"
    width="1200px"
>
	<el-input v-model="addUpdateData.options.name" placeholder="输入姓名" />
	<el-button type="default" @click="addUpdateData.diaVisible = false">取消</el-button>
    <el-button type="primary" @click="doAddUpdateSubmit">提交</el-button>
</el-dialog>

js内容

import { onMounted, ref, toRefs, reactive } from 'vue'
export default{
	props:{
        addUpdateData: {
            type: Object,
            default: {}
        },
    },
    // 接收传入过来的props  引入emit进行子父传值
    setup(props, { emit }){
		let { addUpdateData } = toRefs(props)
		
		function doAddUpdateSubmit() {
			// emit('提示事件名称', 要传入的值)
			// emit() 第一个参数为父组件要用@绑定的事件，这里就是@submit，详见父组件
            emit('submit', props.addUpdateData)
        }
        
        return{
			addUpdateData,
			doAddUpdateSubmit
		}
	}
}

到这里就算封装结束了，组件里面的内容，自己自定义，我这里用的是表单，还有其他问题的话，可以随时留言讨论或者私信