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>

当我在输入something中输入数据时，它不会绑定到v-input内输入值中的任何内容。

我如何实现这一目标？

Answer 1

启用v-model the inner component must take a value property。

使用value将<input>绑定到内部:value，而不是v-model（这会改变来自父级的道具）。编辑内部<input>时，为父级发出input事件，以更新其值（input事件将更新父级在v-model上的变量）。

此外，如果您有type道具的默认值，请在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>

Answer 2

https://vuejs.org/v2/guide/components.html#sync-Modifier

<template>
  <q-layout>
    <v-input :value.sync="something" />
  </q-layout>
</template>

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

<script>
export default {
    props: ['type', 'value'],
    name: 'v-input',
    data:function(){
        return {
            inputVal: ''
        };
    },
    watch:{
        value: function(newValue){
            this.$emit('update:value', newValue)
        }
    }
}
</script>

您需要使用.sync修饰符将值传递给输入组件，以便更改将同步回父级。

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

2 个答案: