在自定義組件上使用 v-model

Question

當我開始在輸入字段中輸入時，我想在控制台中獲取此數據，但目前它是空的。 我究竟做錯了什么？

HTML：

<products-list v-model="product.name" v-on:keyup="productName"></products-list>

JS：

Vue.component('products-list', {
    template:
        `<input class="product_name form-control" contenteditable="true"></input>`,
});

var app = new Vue({
    el: '#app',
    data: {
        items: items,
        product: {
            name: "",
        }
    },
    methods: {
        productName: function() {
            console.log(product.name);
        }
    }
});

Answer 1

v-model默認使用@input事件，所以如果你想在自定義組件上使用v-model ，你需要向父組件發出輸入事件。 因此，在您的組件中，您只需執行以下操作：

<input class="product_name form-control" @input="$emit('input', $event.target.value)" />

現在在您的父母中，您可以執行以下操作：

<products-list v-model="product.name"></products-list>

您可以在此 JSFiddle 上查看完整示例： https ://jsfiddle.net/7s2ugt11/

Answer 2

Vue 3.x 有重大變化：

BREAKING ：在自定義組件上使用時， v-model prop 和 event 默認名稱會更改：
道具： value -> modelValue價值
事件： input -> update:modelValue

https://v3.vuejs.org/guide/migration/v-model.html

所以你的子組件將是：

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

<script>
export default {
  name: "ProductsList",
  props: ['modelValue']
}
</script>

在父組件中，您不會更改任何內容：

<products-list v-model="product.name"></products-list>

Answer 3

在自定義組件中使用v-model有時會導致我們產生一些沖突。

或者我們只是想將值用於不同的目的。

這就是 vue 引入model的原因。 請看一看。

<!-- Parent Component -->
<div id="app">
  <my-checkbox v-model="checked" value="unchanged"></my-checkbox>{{checked}}
</div>

<!-- Child Component -->
<template id="my_checkbox">
  <div>
   My value is {{value}} <br>
   <input type="checkbox" :value="value" @change="$emit('change', !checked)">  
  </div>
</template>

和腳本：

Vue.component('my-checkbox', {
    template: '#my_checkbox',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Boolean,
      default: false
    }
  },
})

new Vue({
  el: "#app",
  data: {
        checked: null
  },    
})

看到它在行動