vue3封装element-plus dialog对话框与vue2.x相比,思路大体相同,都是通过props和emit进行双向绑定,不过vue3写法是update:[prop]
环境:
vue:3.2.16
vite:2.6.4
element-plus:1.2.0-beta.3
效果:
父组件
<template>
<el-button type="primary" @click="open(1)">添加</el-button>
<el-button @click="open(2)">编辑</el-button>
<my-dialog
:propEditData="editeData"
:propVisible="flag"
@refreshList="getTableList"
v-model:propVisible="flag"
></my-dialog>
</template>
<script>
import myDialog from "./dialogMy.vue";
import {
defineComponent, reactive, toRefs, watch } from "vue";
export default defineComponent({
components: {
myDialog },
setup() {
// 构造vue2的data
const state = reactive({
flag: false, // 对话框显示隐藏
editeData: {
}, // 编辑时存储数据
});
// 数据相关
const onData =