如何将子元素 v-model 暴露为 vue 组件 v-model

【问题标题】：How expose child element v-model as the vue component v-model如何将子元素 v-model 暴露为 vue 组件 v-model
【发布时间】：2018-11-09 14:35:40
【问题描述】：

我在我的 vue 组件中使用了一个简单的文本区域。：

<input v-model="someRootProperty"/>

例如，我想将此输入封装在另一个组件中

<template>
    <div>
        <div>...</div>
        <input v-model="???"/>
    </div>
</template>

我想使用

<my-component v-model="someRootProperty" />

相反，他们将其绕过到组件内的输入。

我应该在组件内部做什么才能将其输入 v-model 公开为组件 v-model？

【问题讨论】：

【解决方案1】：

<input v-model="someRootProperty"/>

与（语法糖）相同：

<input :value="someRootProperty" @input="someRootProperty = $event.target.value"/>

这意味着您可以接受value 作为组件中的道具并发出input 来实现相同的目的。

MyComponent.vue

<template>
  <input :value="value" @input="$emit('input', $event.target.value)>
</template>

<script>
export default {
  props: ['value']
}

然后像这样使用它。

<MyComponent v-model="someRootProperty"/>

【讨论】：