如何將子元素 v-model 暴露為 vue 組件 v-model

Question

我在我的 vue 組件中使用了一個簡單的文本區域。：

<input v-model="someRootProperty"/>

例如，我想將此輸入封裝在另一個組件中

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

我想用

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

相反，他們將其繞過到組件內部的輸入。

我應該在組件內部做什么才能將其輸入 v-model 公開為組件 v-model？

Answer 1

<input v-model="someRootProperty"/>

與（語法糖）相同：

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

這意味着您可以接受value作為組件中的 prop 並發出input以實現相同的目的。

我的組件.vue

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

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

然后像這樣使用它。

<MyComponent v-model="someRootProperty"/>