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>

的inputText：

<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处理父母与子女之间的沟通并观察其价值观的变化，而应通过$emit事件（有或没有数据）处理儿童与父母之间的沟通。并使用父方法处理它们。

Vue：链接组件

1 个答案: