如何在从其他自定义组件构建自定义组件时启用v模型绑定

Question

我能够从<input />构建一个简单的textbox组件，并正确地设置v模型绑定。

我试图对一个自定义组件进行同样的操作:来自vs-input的vuesax。

下面的模式不像预期的那样工作：

<template>
  <div>
    <vs-input type="text" v-model="value" @input="text_changed($event)" />
    <!-- <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> -->
  </div>
</template>

<script>
export default {
  name: 'TestField',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    text_changed(val) {
      console.log(val)
      // this.$emit('input', val)
    }
  }
}
</script>

在从其他自定义组件构建自定义组件时，我们是否需要特别注意使v模型绑定正常工作？

Answer 1

下面的代码可能会对您有所帮助。(示例代码尝试使用代码)

更新子组件中的道具

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <input type="text" :value="test" @change="abc">
  {{ test }}
</div>

//VUE CODE

new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue.js!',
      },
   props:{
     test:{
        type:String,
        default:''
     } 
   },
  methods:{
     abc:function(event){
      //console.log("abc");
      console.log(event.target.value);
      this.test=event.target.value;
    }
   }
  })

Answer 2

我更喜欢将props与computed接口

<template>
  <div>
    <vs-input type="text" v-model="cValue" />
  </div>
</template>

<script>
export default {
  name: 'TestField',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    cValue: {
      get: function(){
        return this.value;
      },
      set: function(val){

         // do w/e
         this.$emit('input', val)
      }
    }
  }
}
</script>

计算设置器