从子组件中修改props.value

Question

我是Vue的新手并试图构建一个"下拉"组件.我想从像这样的父组件中使用它:

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

where selection存储data在父节点上,应该更新以反映用户的选择.要做到这一点,我相信我的下拉组件需要一个value道具,它需要input在选择更改时发出事件.

但是,我还想修改value子项本身内部,因为我希望能够自己使用下拉组件(我需要修改它,因为否则UI将不会更新以反映新选择的值,如果组件是单独使用的).

有没有办法可以v-model像上面一样绑定,还可以修改子内的值(看来我不能,因为value是道具而且孩子不能修改自己的道具).

Answer 1

您需要为处理输入/值值的本地值设置计算属性代理.

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

现在,您可以将模板设置为使用该mySelection值来管理此组件内的数据,并且在更改时,数据会正确发出,并且selected在父模板中使用时始终与v-model()同步.

Answer 2

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

使用自定义事件的表单输入组件

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