vue3+ts defineEmits update使用，v-model:visible 子组件传递数据给父组件

最新推荐文章于 2024-03-18 15:33:05 发布

mxlWhb

最新推荐文章于 2024-03-18 15:33:05 发布

阅读量4.1k

点赞数 4

分类专栏： vue ts 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42859450/article/details/127790694

版权

vue 同时被 2 个专栏收录

88 篇文章 4 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

//父组件
<div>
 <Dialog
    v-if="visible"
    v-model:visible="visible"
  />
  <el-button @click = "visible=true">打开弹窗<el-button/>
</div>
<script lang="ts" setup>
import {ref}from 'vue'
let visible = ref(false)
</script>

//子组件Dialog
<template>
 <el-dialog v-model="_visible" title="Add Data Value" width="60%" destroy-on-close @close="onClose">
    <el-form label-width="150px" inline>
      <el-form-item >
        <el-input v-model="form.name" prop="name"  />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
const emits = defineEmits<{
  (e: 'update:visible', value: boolean): void;//无需在父组件注册update:visible
}>();
let form = reactive({name:""})
const _visible = computed({
  get: () => props.visible,
  set: value => emits('update:visible', value),
});
const onClose = () => {
  emits('update:visible', false);//无需在父组件注册update:visible事件，即可改变父组件的visible值
};
</script>