拼多多运营怎么做_网站安全检测漏洞扫描风险等级_宁波seo快速优化_哪里有网络推广

【父组件】：SampleInput.vue，局部代码片段

引入子组件 ApplyItemChooseDialog.vue，定义变量，用于渲染和显示标识

<script>片段代码

import ApplyItemChooseDialog from "@/views/accept/ApplyItemChooseDialog.vue";

  // 渲染选择受理项目对话框标识，默认不渲染const isCreateApplyItemChooseDialog = ref(false);// 选择受理项目对话框显示标识const applyItemChooseDialogVisible = ref(false);

使用子组件

<template>片段代码

        <ApplyItemChooseDialogv-if="isCreateApplyItemChooseDialog":showDialog="applyItemChooseDialogVisible"@closeDialog="closeApplyItemChooseDialog" />

点击按钮，弹出对话框

<script>片段代码

const onChooseItemClick = () => {// 如果尚未渲染子组件ApplyItemChooseDialogif (!isCreateApplyItemChooseDialog.value) {// 标识渲染子组件ApplyItemChooseDialog，响应式标识的值为真时，满足v-if的条件，开始渲染isCreateApplyItemChooseDialog.value = true;}applyItemChooseDialogVisible.value = true;}

关闭对话框

<script>片段代码

  const closeApplyItemChooseDialog = () => {applyItemChooseDialogVisible.value = false;}

 

【子组件】：对话框文件，ApplyItemChooseDialog.vue

全部代码

<script setup lang="ts" name="ApplyItemChooseDialog">
import { ref, watch } from "vue";const props = defineProps(["showDialog"]);const emits = defineEmits(["closeDialog"]);
// 关闭对话框（点击对话框右上角的关闭按钮）
const closeDialog = () => {// 触发执行事件 closeDialogemits("closeDialog");
};// 对话框显示标识
const dialogVisible = ref(false);watch(() => props.showDialog,(value) => {dialogVisible.value = value;},{ immediate: true }
);const onConfirmClick = async () => {// 关闭对话框closeDialog();
}
</script><template><el-dialogtitle="对话框"v-model="dialogVisible"@close="closeDialog"><template #footer><div><el-button type="primary" @click="onConfirmClick">确定</el-button><el-button @click="() => (dialogVisible = false)">取消</el-button></div></template></el-dialog>
</template>

【应用效果 】