Блог

Я сделал несколько компонентов vuejs, просматривая API vuejs. Когда я тестировал какой-то код, но v-модель не работала с пользовательским компонентом. Это мой код.

Пользовательский ввод.vue

 lt;templategt;  lt;divgt;  lt;input  :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)"  /gt;  lt;/divgt; lt;/templategt;  lt;scriptgt; export default {  props: ["modelValue"], }; lt;/scriptgt;  lt;stylegt;lt;/stylegt; 

Тестовая модель.vue

 lt;templategt;  lt;divgt;  lt;custom-input  :model-value="searchText"  @update:model-value="searchText = $event"  gt;lt;/custom-inputgt;  lt;pgt;{{ searchText }}lt;/pgt;  lt;/divgt; lt;/templategt;  lt;scriptgt; import CustomInput from "./element2/CustomInput.vue";  export default {  data() {  return {  searchText: "",  };  },  components: {  CustomInput,  }, }; lt;/scriptgt;  lt;stylegt;lt;/stylegt; 

И это написано на API vuejs(3.x) вот так.

Но это не сработало при тестировании с тем же кодом, что и API. Поэтому я изменил файл CustomInput.vue следующим образом.

 lt;templategt;  lt;divgt;  lt;input  :value="modelValue"  @input="$emit('update:model-value', $event.target.value)"  /gt;  lt;/divgt; lt;/templategt;  lt;scriptgt; export default {  props: ["modelValue"], }; lt;/scriptgt;  lt;stylegt;lt;/stylegt; 

It worked. But I don’t know why it worked. I want to know why it worked. And on the vuejs API, the above code can be shortened and used.

so I tested with that code like this.

TestVueModel.vue

 lt;templategt;  lt;divgt;  lt;custom-input v-model="searchText"gt;lt;/custom-inputgt;  lt;pgt;{{ searchText }}lt;/pgt;  lt;/divgt; lt;/templategt;  lt;scriptgt; import CustomInput from "./element2/CustomInput.vue";  export default {  data() {  return {  searchText: "",  };  },  components: {  CustomInput,  }, }; lt;/scriptgt;  lt;stylegt;lt;/stylegt; 

Пользовательский ввод.vue

 lt;templategt;  lt;divgt;  lt;input  :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)"  /gt;  lt;/divgt; lt;/templategt;  lt;scriptgt; export default {  props: ["modelValue"], }; lt;/scriptgt;  lt;stylegt;lt;/stylegt; 

Но это также не сработало. Возможно, я неправильно понял код и содержимое API. Я хочу знать, что означает API и почему работает первый код, который я написал ранее, и как сократить v-модель с помощью пользовательского компонента.