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 = trueconsole.log(state.addUpdateData.diaVisible)}function dia2() {state.addUpdateData = {title: '新增组织',diaVisible: false,options:{}}state.addUpdateData.diaVisible = trueconsole.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}}}
