Vue：链接组件

Question

如果我有一个像这样的TodoList 组件：

<template>
  <div>
    <InputText
        v-model="newTodoText"
        placeholder="New todo"
        @keydown.enter="addTodo"
    />
  ...
</template>

如何更改我的InputText 组件以将文本发送回该组件？

<template>
  <input
    type="text"
    class="input"
  >
</template>

addTodo方法存在，只是不知道如何将InputText中的文字链接回父组件。

Answer 1

将keydown.enter 签入您的InputText 组件。然后，你可以做例如@keydown.enter="emitEnterKeyPressed() 改为在您的组件中。在这个emitEnterKeyPressed() 方法中，你可以$emit 一个事件连同文本输入的内容，然后在你的父级中响应这个事件：

<template>
  <div>
    <InputText
        v-model="newTodoText"
        placeholder="New todo"
        @enter_key_pressed="addTodo"
    />
  ...
</template>

输入文本：

<template>
  <input
    type="text"
    class="input"
    v-model="v_model_text"
    @keydown.enter="emitEnterKeyPressed()"
  >
</template>

您的addTodo 可能看起来像：

addTodo: function(input_text) {
    //do something with the input_text from TextInput component
}

你的emitEnterKeyPressed 看起来像：

emitEnterKeyPressed: function() {
    this.$emit('enter_key_pressed', this.v_model_text);
}

您想要这样做的原因是因为各个组件应该相当自主地运行以确保可重用性。如果您需要这些组件在彼此之间进行通信，那么为此遵循适当的程序很重要。特别是，父子之间的通信应该通过props 处理并观察其值的变化，而子父之间的通信应该通过$emiting 事件（有或没有数据）处理并使用父方法。