import { ref } from 'vue' const emit = defineEmits(['addTodo']) // 定义 addTodo 事件 const name = ref('')

在Vue.js中，`ref` 是一个响应式数据创建器，它用于声明一个受观察的组件属性。当你在模板中使用 `ref`，比如 `const name = ref('')`，你实际上是创建了一个名为 `name` 的变量，并且它的值可以随着组件的运行时间变化而自动更新视图。

`defineEmits` 是 Vue 3 中提供的函数，用于静态地配置组件的自定义事件发射。在这个例子中，`['addTodo']` 表示组件将触发一个名为 `addTodo` 的自定义事件。`emit` 函数则允许你在组件内部触发这个事件并传递相关数据。

简单来说，`ref` 和 `defineEmits` 是用于管理状态和处理组件间通信的重要工具。你可以像这样使用它们：

<!-- 模板 -->
<input v-model="name" @input="handleChange">

<button @click="handleAdd">添加</button>

<template #default>
  <p>待办事项：{{ name }}</p>
</template>

<script>
export default {
  setup() {
    const name = ref('');
    const handleChange = (e) => {
      name.value = e.target.value;
    };

    const handleAdd = () => {
      emit('addTodo', name.value); // 触发 addTodo 事件，传入 name 的当前值
      name.value = ''; // 清空输入框
    };
    
    return { name, handleChange, handleAdd };
  },
  emits: ['addTodo'], // 需要在setup中明确告知组件会发出哪些事件
};
</script>