vue3 简单的添删修查 (ref)

   用的vue3 , ref  父子之间的传值, 实用于vue3的初学者

 父组件

<script setup>
import Edit from './components/Edit.vue'
import { ref,onMounted } from 'vue'
import axios from 'axios'


// TODO: 列表渲染
const list = ref([])
const getListData = async () => {
  const res = await axios.get('/list') 
  console.log(res.data)
  list.value = res.data
}
getListData()
// TODO: 删除功能
const del = async (id) => {
  console.log(id)
   await axios.delete(`/del/${id}`)

  getListData()
}

// TODO: 编辑功能 
const getEdit = ref(null)
 const  editId = ref({})
const edit = (row) => {
  getEdit.value.dialogVisible = true
    console.log(row)
  editId.value = row
}
// 新增
const add = () => {
  getEdit.value.dialogVisible = true
  
}
</script>

<template>
  
  <div class="app">
    <el-button type="primary" @click="add()">新增</el-button>
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{row}">
          <el-button type="primary" link @click="edit(row,'edit')">编辑</el-button>
          <el-button type="danger" link @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <Edit ref="getEdit" :editId="editId" @refresh="getListData" />
</template>

<style scoped>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>

子组件

<script setup>
// TODO: 编辑
import { ref } from 'vue'
import axios from 'axios';
// 弹框开关
const props = defineProps({
  editId:Object
})

console.log(props.editId.name)

const dialogVisible = ref(false)
defineExpose({dialogVisible})

const emit = defineEmits(['refresh'])
// 确认
const confirm = async () => {
  // 新增
  if (!props.editId.id) {
     await axios.post('/add', {
  name: props.editId.name,
  place: props.editId.place
    })
  } else {
    // 编辑
     await  axios.patch(`/edit/${props.editId.id}`, {
  name: props.editId.name,
  place: props.editId.place
 })
  }
  // 通知父组件更新数据
  emit('refresh')
  // 清空表单
  props.editId.name = ''
  props.editId.place = ''
  // 关闭
  dialogVisible.value = false

}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="400px">
    <el-form label-width="50px">
      <el-form-item label="姓名">
        <el-input placeholder="请输入姓名" v-model="props.editId.name"  />
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input placeholder="请输入籍贯" v-model="props.editId.place" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-input {
  width: 290px;
}
</style>