Vue3 任务清单：如何从子组件获取 <todo-input> 输入的值

<p>在父组件中，可以定义一个方法 <code>addNewTask</code> 来接收子组件的事件，并将输入框的值作为参数传递过来。</p>
<pre><code class="language-vue"><template>
  <div>
    <todo-input @add="addNewTask"></todo-input>
  </div>
</template>

<script>
import TodoInput from './TodoInput.vue';

export default {
  components: {
    TodoInput,
  },
  methods: {
    addNewTask(task) {
      console.log(task); // 输出输入框的值
    },
  },
};
</script></code></pre>
<p>在子组件 <code>TodoInput</code> 中，可以通过 <code>$emit</code> 触发父组件的 <code>add</code> 事件，并将输入框的值作为参数传递过去。</p>
<pre><code class="language-vue"><template>
  <div>
    <input type="text" v-model="task" />
    <button @click="addTask">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      task: '',
    };
  },
  methods: {
    addTask() {
      this.$emit('add', this.task); // 触发add事件，传递输入框的值
      this.task = ''; // 清空输入框
    },
  },
};
</script></code></pre>