Question

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

我正尝试使用 vuesax 中的自定义组件vs-input。

遵循以下模式无法正常工作：

<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

以下代码可能会对您有所帮助。（示例代码在Codepen中尝试）

updating props inside a child component

//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>

Computed Setter

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

2 个答案: