从子组件中修改props.value

Question

我是Vue新手，正在尝试构建一个“下拉”组件。我想从父组件使用它，如下所示：

<my-dropdown v-model="selection"></my-dropdown>

其中选择作为数据存储在父节点上，并且应该更新以反映用户的选择。为此，我相信我的下拉组件需要一个valueprop，并且当选择更改时，它需要发出输入事件。

但是，我也想修改值从孩子本身，因为我希望能够使用下拉组件本身（我需要修改它，因为否则UI将不会更新以反映新选择的值如果组件自行使用）。

是否有一种方法可以像上面那样绑定v-model，但也可以从子对象内部修改值（似乎我不能，因为value是一个道具，子对象不能修改自己的道具）。

Answer 1

您可以使用自定义表单输入组件

使用自定义事件形成输入组件

基本上，您的自定义组件应该接受值属性，并在值更改时发出输入事件

Answer 2

Vue的理念是：“放下道具，把事情做好”。它甚至在文档中这样说：组合组件。

组件应该一起使用，最常见的是在父子关系中：组件A可以在自己的模板中使用组件B。他们不可避免地需要相互沟通：父母可能需要将数据传递给孩子，孩子可能需要将孩子身上发生的事情通知父母。然而，通过一个明确定义的接口尽可能地保持父对象和子对象的解耦也是非常重要的。这确保了每个组件的代码可以相对独立地编写和推理，从而使它们更易于维护和重用。

在Vue中，父子组件关系可以概括为道具下降、事件上升。父对象通过道具将数据向下传递给子对象，子对象通过事件向父对象发送消息。让我们看看他们接下来是如何工作的。

不要试图修改子组件中的值。告诉父组件一些事情，如果父组件关心，它可以做一些事情。让孩子们改变事情会给孩子们太多的责任。

Answer 3

对于处理输入/值的局部值，需要有一个计算属性代理。

props: {
  value: {
    required: true,
  }
},
computed: {
  mySelection: {
    get() {
      return this.value;
    },
    set(v) {
      this.$emit('input', v)
    }
  }
}

现在，您可以将模板设置为使用mySelection值来管理此组件内的数据，当它发生更改时，数据将正确发出，并且当您在父级中使用它时，数据始终与v型（selected）同步。