javascript - 如何将 v-model 绑定(bind)到包含输入的子组件

Question

我有一些看起来像这样的组件。

<template>
  <q-layout>
    <v-input v-model="something" />
  </q-layout>
</template>

<script>
import { QLayout } from 'quasar'
import { Input } from 'vedana'

export default {
  name: 'index',
  components: {
    QLayout,
    Input
  },
  data () {
    return {
      something: ''
    }
  }
}

这个 v-input 组件看起来像这样:

<template>
    <input
        :type="type ? type : 'text'"
        class="v-input"/>
</template>

<script>
export default {
    props: ['type'],
    name: 'v-input'
}
</script>

当我在输入中输入数据时，某些内容不会绑定(bind)到 v-input 内的输入值中的任何内容。

如何实现这一目标？

Answer 1

启用 v-model the inner component must take a value property的使用.

绑定(bind)value向内<input>使用:value ，不是v-model (这会改变来自父级的 prop)。而当内心<input>已编辑，发出 input父级的事件，以更新其值( input 事件将更新父级在 v-model 上的变量)。

此外，如果您有 type 的默认值prop，在props中声明它，不在模板中。

您的代码应该是这样的

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

<script>
export default {
    props: {
      type: {default() { return 'text'; }},
      value: {}                              // you can also add more restrictions here
    },
    name: 'v-input'
}
</script>

关于什么的信息props可以有:Components / Passing data With Props .

下面是演示。

Vue.component('v-input', {
  template: '#v-input-template',
  props: {
    type: {default() { return 'text'; }},
    value: {}                              // you can also add more restrictions here
  },
  name: 'v-input'
});

new Vue({
  el: '#app',
  data: {
    something: "I'm something"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <p>Parent something: {{ something }}</p>
  <hr>
  Child: <v-input v-model="something" />
</div>

<template id="v-input-template">
   <input
      :type="type"
      :value="value"
      @input="$emit('input', $event.target.value)"
      class="v-input" />
</template>