как включить привязку v-модели при создании пользовательских компонентов из других пользовательских компонентов

Question

Я могу создать простой компонент текстового поля из <input /> и правильно настроить привязку 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

Я предпочитаю взаимодействовать 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>

Вычислитель

Answer 2

Следующий код может вам помочь. (Пример кода попробуйте в codepen)

обновление реквизита внутри дочернего компонента

//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;
    }
   }
  })