VUE学习笔记(四)-通过子组件实例实现对话框的打开

通过子组件实例实现对话框的打开

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>