Vue3学习笔记

<template>
  <!-- v-if: 条件渲染 -->
  <div v-if="isAdmin">管理员界面</div>
  
  <!-- v-for: 列表渲染 -->
  <div v-for="user in users" :key="user.id">
    {{ user.name }}
  </div>
  
  <!-- v-model: 双向绑定 -->
  <input v-model="username" />
  
  <!-- @click: 事件绑定 -->
  <button @click="handleClick">提交</button>
</template>

<!-- UserCard.vue -->
<template>
  <div class="user-card">
    <h3>{{ user.name }}</h3>
    <p>年龄: {{ user.age }}</p>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 接收父组件传入的数据（类比构造函数参数）
const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})

// 定义事件（类比回调函数）
const emit = defineEmits(['update'])

// 响应式数据
const count = ref(0)

// 方法
const handleClick = () => {
  count.value++
  emit('update', count.value)  // 向父组件发送事件
}
</script>

<style scoped>
.user-card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
</style>

<!-- ParentView.vue -->
<template>
  <div>
    <UserCard 
      :user="currentUser" 
      @update="handleUpdate" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserCard from '@/components/UserCard.vue'

const currentUser = ref({
  name: '张三',
  age: 25
})

const handleUpdate = (count) => {
  console.log('子组件点击了', count, '次')
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" placeholder="用户名" />
    <input v-model="form.password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  username: '',
  password: ''
})

const handleSubmit = async () => {
  console.log('提交表单:', form)
  // 调用登录 API
}
</script>

<template>
  <div>
    <!-- 查询条件 -->
    <div class="search-bar">
      <input v-model="query.keyword" placeholder="请输入关键字" />
      <select v-model="query.status">
        <option value="">全部</option>
        <option value="1">启用</option>
        <option value="0">禁用</option>
      </select>
      <button @click="handleSearch">查询</button>
      <button @click="handleReset">重置</button>
    </div>

    <!-- 数据表格 -->
    <table v-if="!loading">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in tableData" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.status === 1 ? '启用' : '禁用' }}</td>
          <td>
            <button @click="handleEdit(row)">编辑</button>
            <button @click="handleDelete(row.id)">删除</button>
          </td>
        </tr>
        <tr v-if="tableData.length === 0">
          <td colspan="4">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <p v-else>加载中...</p>

    <!-- 分页 -->
    <div class="pagination">
      <button :disabled="pagination.page <= 1" @click="changePage(pagination.page - 1)">上一页</button>
      <span>第 {{ pagination.page }} 页 / 共 {{ totalPages }} 页</span>
      <button :disabled="pagination.page >= totalPages" @click="changePage(pagination.page + 1)">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { getUserList } from '@/api/user'

// 查询条件
const query = reactive({
  keyword: '',
  status: '',
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
})

const totalPages = computed(() => Math.ceil(pagination.total / pagination.pageSize))

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const res = await getUserList({
      ...query,
      page: pagination.page,
      pageSize: pagination.pageSize,
    })
    tableData.value = res.list
    pagination.total = res.total
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 点击查询：重置到第1页再请求
const handleSearch = () => {
  pagination.page = 1
  loadData()
}

// 重置查询条件
const handleReset = () => {
  query.keyword = ''
  query.status = ''
  pagination.page = 1
  loadData()
}

// 切换分页
const changePage = (page) => {
  pagination.page = page
  loadData()
}

// 编辑行
const handleEdit = (row) => {
  console.log('编辑:', row)
  // 通常：打开弹窗并传入当前行数据
}

// 删除行
const handleDelete = async (id) => {
  if (!confirm('确定删除吗？')) return
  await deleteUser(id)
  loadData()  // 刷新列表
}

// 初始化加载
onMounted(() => loadData())
</script>

<!-- 父组件 UserListView.vue -->
<template>
  <div>
    <button @click="openAdd">新增</button>
    <button @click="openEdit(currentRow)">编辑</button>

    <!-- 弹窗组件 -->
    <UserDialog
      v-if="dialogVisible"
      :visible="dialogVisible"
      :init-data="dialogData"
      @confirm="handleDialogConfirm"
      @cancel="dialogVisible = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserDialog from '@/components/UserDialog.vue'

const dialogVisible = ref(false)
const dialogData = ref(null)  // 传给弹窗的初始数据，null 表示新增

// 打开新增弹窗
const openAdd = () => {
  dialogData.value = null
  dialogVisible.value = true
}

// 打开编辑弹窗，传入当前行数据
const openEdit = (row) => {
  dialogData.value = { ...row }  // 浅拷贝，避免直接修改原数据
  dialogVisible.value = true
}

// 弹窗点击确认，接收子组件返回的表单数据
const handleDialogConfirm = async (formData) => {
  if (formData.id) {
    await updateUser(formData)   // 有 id：编辑
  } else {
    await createUser(formData)   // 无 id：新增
  }
  dialogVisible.value = false
  loadData()  // 刷新列表
}
</script>

<!-- 弹窗子组件 UserDialog.vue -->
<template>
  <div class="dialog-mask">
    <div class="dialog">
      <h3>{{ form.id ? '编辑用户' : '新增用户' }}</h3>

      <form @submit.prevent="handleConfirm">
        <div>
          <label>姓名</label>
          <input v-model="form.name" placeholder="请输入姓名" required />
        </div>
        <div>
          <label>邮箱</label>
          <input v-model="form.email" type="email" placeholder="请输入邮箱" />
        </div>
        <div class="dialog-footer">
          <button type="button" @click="emit('cancel')">取消</button>
          <button type="submit">确认</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  initData: Object,  // 父组件传入的初始数据（编辑时有值，新增时为 null）
})

const emit = defineEmits(['confirm', 'cancel'])

// 弹窗内部表单状态
const form = reactive({
  id: null,
  name: '',
  email: '',
})

// 监听 initData 变化，初始化表单（弹窗每次打开时同步数据）
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.initData) {
        // 编辑模式：填入初始数据
        Object.assign(form, props.initData)
      } else {
        // 新增模式：重置表单
        Object.assign(form, { id: null, name: '', email: '' })
      }
    }
  }
)

// 点击确认：将表单数据回传给父组件
const handleConfirm = () => {
  emit('confirm', { ...form })  // 传副本，避免外部直接引用内部响应式对象
}
</script>

<template>
  <button :disabled="submitting" @click="handleSubmit">
    {{ submitting ? '提交中...' : '提交' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const submitting = ref(false)

const handleSubmit = async () => {
  if (submitting.value) return  // 防止重复点击
  submitting.value = true
  try {
    await api.submitOrder(form)
    alert('提交成功')
  } catch (error) {
    alert('提交失败：' + error.message)
  } finally {
    submitting.value = false  // 成功或失败都恢复按钮
  }
}
</script>