引言
多个页面中需要录入用户数据(弹窗内容相同),重复写弹窗代码比较繁琐。因此封装一下组件,使用效果如下:
本例中模型较简单,记录下使用方法和原理
实现原理
参考VUE官方两个例子,基本父子件通信如下
MyDialog使用如下:
<MyDialog v-model:visible="visible" v-model="dialogValue" />
<!-- 实际省略了默认modelValue, 等同于下 -->
<MyDialog v-model:visible="visible" v-model:modelValue="dialogValue" />
因此组件中需要定义两个prop和emit
const props = defineProps(['visible', 'modelValue'])
const emit = defineEmits(['update:visible', 'update:modelValue'])
emit触发由弹框点击了确认或者关闭按钮适合调用
// 点击取消时候设置visible为false关闭
emit('update:visible', false)
// 点击取消时候设置visible为false关闭,并触发'update:modelValue' 返回结果,更新父组件的v-model值
emit('update:visible', false)
emit('update:modelValue', {
name, email })
完整代码
MyDialog.vue
<template>
<el-dialog v-model="visible" title="用户录入">
<el-form>
<el-form-item label="姓名">
<el-input v-model="name" autocomplete="off" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="email" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="handleClick">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts"> import {
computed, ref } from 'vue'; const props = defineProps(['visible', 'modelValue']) const emit = defineEmits(['update:visible', 'update:modelValue']) const visible = computed({
get() {
return props.visible }, set(value) {
emit('update:visible', value) } }) const name = ref('') const email = ref('') const handleClick = () => {
emit('update:visible', false) emit('update:modelValue', {
name, email }) } </script>
App.vue
<template>
<el-button type="primary" @click="handleClick">点击获取组件值</el-button>
<MyDialog v-model:visible="visible" v-model="dialogValue" />
<h1>弹窗结果是: {
{ dialogValue }}</h1>
<el-button type="primary" @click="handleClick2">点击获取组件值2</el-button>
<MyDialog v-model:visible="visible2" v-model="dialogValue2" />
<h1>弹窗2结果是: {
{ dialogValue2 }}</h1>
</template>
<script setup lang="ts"> import {
ref } from "vue"; import MyDialog from "~/components/MyDialog.vue"; const visible = ref(false) const dialogValue = ref({
name: '', email: '' }) const handleClick = () => {
visible.value = true; } const visible2 = ref(false) const dialogValue2 = ref({
name: '', email: '' }) const handleClick2 = () => {
visible2.value = true; } </script>
文章评论