组件拆分

现在的 App.vue 功能已经完备，但所有代码都塞在一起了。

下一步我们将进行组件拆分，你会学到：

  • 如何在 Tailwind v4 环境下编写高度复用的 子组件。
  • 如何使用 defineProps 和 defineEmits 在 JS 组件间传递数据。

现在在 src/components 目录下新建以下四个文件：

  • TaskHeader.vue（纯展示）
  • TaskInput.vue（输入逻辑）
  • TaskFilter.vue（状态切换）
  • TaskItem.vue（单条任务）

TaskHeader.vue —— 静态展示组件

这个组件不需要任何 JS 逻辑，只需展示 UI。

在 Tailwind v4 中，我们继续使用新的渐变语法。

实例

<template>
  <header class="bg-linear-to-br from-blue-600 to-indigo-700 p-8 text-white">
    <h1 class="text-3xl font-black tracking-tight">TaskHub</h1>
    <p class="text-blue-100/80 text-sm">Vue 3 + Tailwind v4 实战</p>
  </header>
</template>

TaskInput.vue —— 使用 defineEmits 发送数据

这个组件负责获取用户输入。当用户点击添加时，它不直接修改数据，而是通过 emit 通知父组件。

实例

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

// 定义组件向外抛出的事件名
const emit = defineEmits(['add-task']);

const title = ref('');

const handleSubmit = () => {
  const value = title.value.trim();
  if (!value) return;
 
  // 发送事件，并将数据作为参数传递
  emit('add-task', value);
  title.value = '';
};
</script>

<template>
  <div class="flex gap-2 mb-8">
    <input
     v-model="title"
     @keyup.enter="handleSubmit"
     placeholder="今天要完成什么？"
     class="flex-1 bg-slate-50 border-none rounded-2xl px-4 py-3 focus:ring-2 focus:ring-brand/50 outline-none transition-all"
   />
    <button @click="handleSubmit" class="bg-brand text-white px-6 rounded-2xl font-bold hover:scale-105 active:scale-95 transition-all">
      +
    </button>
  </div>
</template>

TaskFilter.vue —— 组件间的 v-model 通信

在 Vue 3.4+ 中，推荐使用 defineModel() 来实现双向绑定。这在 Tailwind v4 的 UI 切换中非常高效。

实例

<script setup>
// 定义 v-model，父组件传来的值会自动同步
const modelValue = defineModel();

const filters = ['all', 'active', 'completed'];
</script>

<template>
  <div class="flex p-1 bg-slate-100 rounded-xl mb-6">
    <button
     v-for="f in filters"
     :key="f"
     @click="modelValue = f"
     :class="[
       'flex-1 py-1.5 text-xs font-bold rounded-lg transition-all capitalize',
       modelValue === f ? 'bg-white text-brand shadow-sm' : 'text-slate-500'
     ]"
   >
      {{ f }}
    </button>
  </div>
</template>

TaskItem.vue —— 使用 defineProps 接收数据

它是最核心的子组件，负责展示单条任务并反馈修改/删除操作。

实例

<script setup>
// 接收父组件传递的任务对象
defineProps({
  task: {
    type: Object,
    required: true
  }
});

// 定义通知父组件的事件
const emit = defineEmits(['toggle', 'remove']);
</script>

<template>
  <li class="group flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-transparent hover:border-slate-200 hover:bg-white transition-all">
    <div class="flex items-center gap-3">
      <input
       type="checkbox"
       :checked="task.isCompleted"
       @change="emit('toggle', task.id)"
       class="w-5 h-5 accent-brand cursor-pointer"
     />
      <span :class="['text-slate-700 font-medium', task.isCompleted ? 'line-through text-slate-400 opacity-50' : '']">
        {{ task.title }}
      </span>
    </div>
    <button @click="emit('remove', task.id)" class="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-500 transition-all p-1">
      ✕
    </button>
  </li>
</template>

重构后的 App.vue (逻辑中枢)

现在的 App.vue 变成了一个干净的指挥官，只负责管理原始数据和处理子组件传来的指令。

实例

<script setup>
import { ref, computed } from 'vue';
// 引入子组件
import TaskHeader from './components/TaskHeader.vue';
import TaskInput from './components/TaskInput.vue';
import TaskFilter from './components/TaskFilter.vue';
import TaskItem from './components/TaskItem.vue';

// --- 数据状态 ---
const tasks = ref([
  { id: '1', title: '体验 Tailwind v4 新特性', isCompleted: false },
  { id: '2', title: '掌握 Composition API', isCompleted: true }
]);
const filter = ref('all');

// --- 逻辑处理 ---
const handleAddTask = (title) => {
  tasks.value.unshift({ id: crypto.randomUUID(), title, isCompleted: false });
};

const handleRemoveTask = (id) => {
  tasks.value = tasks.value.filter(t => t.id !== id);
};

const handleToggleTask = (id) => {
  const task = tasks.value.find(t => t.id === id);
  if (task) task.isCompleted = !task.isCompleted;
};

// --- 计算属性 ---
const filteredTasks = computed(() => {
  if (filter.value === 'active') return tasks.value.filter(t => !t.isCompleted);
  if (filter.value === 'completed') return tasks.value.filter(t => t.isCompleted);
  return tasks.value;
});
</script>

<template>
  <div class="min-h-screen py-12 px-4">
    <div class="max-w-md mx-auto bg-white rounded-3xl shadow-xl shadow-slate-200 border border-slate-100 overflow-hidden">
     
      <TaskHeader />

      <main class="p-6">
        <TaskInput @add-task="handleAddTask" />

        <TaskFilter v-model="filter" />

        <ul class="space-y-3">
          <TransitionGroup name="list">
            <TaskItem
             v-for="task in filteredTasks"
             :key="task.id"
             :task="task"
             @toggle="handleToggleTask"
             @remove="handleRemoveTask"
           />
          </TransitionGroup>
        </ul>

        <div v-if="filteredTasks.length === 0" class="text-center py-12 text-slate-400 text-sm">
          暂无相关任务...
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped>
.list-enter-active, .list-leave-active { transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); }
</style>

核心知识点总结

defineProps (父传子)：

  • TaskItem 通过 props 接收任务数据。在 Vue 中，Props 是只读的。子组件绝不应该直接修改 props 的值，这就是"单向数据流"。

defineEmits (子传父)：

  • 当子组件需要改变数据时（如删除、勾选），它通过 emit 发出信号，由父组件执行真正的修改逻辑。这样保证了数据的修改源头只有一个，方便调试。

defineModel (双向绑定神器)：

  • 在 TaskFilter 中，我们使用了 Vue 3.4 引入的 defineModel。它极大地简化了父子组件之间状态同步的代码，不再需要手动写 props 和监听 @update:modelValue。

Tailwind v4 的复用性：

  • 即使拆分了组件，Tailwind 的原子化类名依然生效。因为 Vite 插件会自动扫描 src 下所有的 .vue 文件并生成对应的样式。