VUE学习笔记(五)-defineprops和torefs的使用

defineprops和torefs的使用

用法，从父组件(Category.vue)向子组件（AddCategory.vue）传输数据

Category.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" :dialogTitle="dialogTitle"></AddCategoryVue>
</template>

<script setup>

import { onMounted, reactive, ref } from 'vue'
import axios from "@/api/api_config.js"

import AddCategoryVue from '@/components/AddCategory.vue'
import { isNull } from '@/utils/filter.js'

///----------------------------------
const tableData = reactive({ list: [] })
const addCategoryRef = ref(null)//获取子组件实例
const dialogTitle = ref("")//对话框标题
///----------------------------------

onMounted(() => {
    getList()
})

//获取分类信息
const getList = () => {
    return axios.get('/category').then((res) => {
        tableData.list = res.data
    })
}

//打开分类页
const handleDialog = (row) => {
    if (isNull(row)) {
        dialogTitle.value = "添加分类"
    } else {
        dialogTitle.value = "修改分类"
    }

    addCategoryRef.value.dialogCategory()//调用子组件方法

}

</script>

src下新建utils文件夹（用于公共方法）,utils下新建filter.js文件

export const isNull = (data) => {
  if (
    data === null ||
    data === undefined ||
    data === "" ||
    JSON.stringify(data) === "{}" ||
    !data
  ) {
    return true;
  } else {
    return false;
  }
};

AddCategory.vue接受来自父组件的数据

<template>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" :before-close="handleClose">
        <el-form :model="sruleFroms" label-width="auto" style="max-width: 600px">
            <el-form-item label="分类名称">
                <el-input v-model="ruleFroms.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
///----------------------------------

defineProps({
    dialogTitle: {
        type: String,
        default: 'AddCategory'
    }
})
const state = reactive({
    dialogVisible: false,
    ruleFroms: {
        id: '',
        name: '图书'
    },
})
///----------------------------------
//打开对话框
const dialogCategory = () => {
    state.dialogVisible = true;

}
//关闭对话框
const handleClose = (done) => {
    state.dialogVisible = false;
    done();
}

//解构
const { dialogVisible, ruleFroms } = toRefs(state)


//主动暴露给父组件，编译器的宏命令,不需要引入
defineExpose({
    dialogCategory
})

</script>