通过子组件实例实现对话框的打开
AddCategory.vue页面里
调整dialogvue里按钮事件
<div class="dialog-footer"> <el-button @click="state.dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="state.dialogVisible = false"> Confirm </el-button> </div>
script脚本更新
<script setup> import { reactive } from 'vue' const state = reactive({ dialogVisible: false }) ///---------------------------------- //打开对话框 const dialogCategory = () => { state.dialogVisible = true; } //关闭对话框 const handleClose = (done) => { state.dialogVisible = false; done(); } //主动暴露给父组件,编译器的宏命令,不需要引入 defineExpose({ dialogCategory }) </script>
src下views文件夹里的CategoryView.vue
<template> <el-card class="box-card"> <template #header> <div class="card-header"> <span>商品分类</span> <el-button type="primary" icon="CirclePlus" round @click="handleDialog()">添加分类</el-button> </div> </template> <el-table :data="tableData.list" stripe style="width: 100%"> <el-table-column prop="id" label="Id" width="180" /> <el-table-column prop="name" label="名称" width="180" /> <el-table-column fixed="right" label="操作" width="180"> <template #default> <el-button type="success" size="small"> 修改 </el-button> <el-button type="danger" size="small">删除</el-button> </template> </el-table-column> </el-table> </el-card> <AddCategoryVue ref="addCategoryRef"></AddCategoryVue> </template>
script脚本添加打开分类页
<script setup> import { onMounted, reactive, ref } from 'vue' import axios from "@/api/api_config.js" import AddCategoryVue from '@/components/AddCategory.vue' ///---------------------------------- const tableData = reactive({ list: [] }) const addCategoryRef = ref(null)//获取子组件实例 ///---------------------------------- onMounted(() => { getList() }) //获取分类信息 const getList = () => { return axios.get('/category').then((res) => { tableData.list = res.data }) } //打开分类页 const handleDialog = () => { addCategoryRef.value.dialogCategory()//调用子组件方法 } </script>
标签:VUE,const,对话框,笔记,学习,reactive,vue,组件,import From: https://www.cnblogs.com/Lvkang/p/18215805