vue自定义组件的v-model

vue对于原生的表单元素都支持v-model进行双向绑定，同样的，自定义组件也可以使用v-model实现双向绑定（这个个人觉得主要用于自定义组件内部存在表单元素时用的比较多）。

对于原生表单元素

比如input

<input v-model="peantText"></input>

vue内部帮我们实现双向绑定的原理如下：

<input :value="peantText" @input="inputChange($event.target.value)"></input>

script部分：(这一部分其实最好还是通过计算属性实现比较好)
inputChange(value){
	this.peanutText = value
}

对于自定义组件

比如有一个自定义组件peanut-input:

<peanut-input v-model="peanutText"></peanut-input>

上述使用v-model之后，vue帮助我们做了如下所示的内容：

<peanut-input :model-value="peanutText" @update:model-value="peanutText = $event"></peanut-input>

具体使用时

假设我们在父组件中这样使用：

<template>
  <h1>组件的v-model</h1>
  <h2>App中的{{msg1}}</h2>
<!-- 通过v-model将msg1绑定到自定义组件上 -->
  <peanut-input v-model="msg1"/>
</template>

<script>
  import peanutInput from "@/09_组件的v-model/peanutInput";

	export default {
		name: "App",
    data(){
      return {
        msg1:'Hello World 1'
      }
    },
    components:{
      peanutInput,
    }
	}
</script>

<style scoped>

</style>

对应的子组件代码：

<template>
  <input type="text" :value="modelValue" @input="inputChange($event)">
</template>

<script>
export default {
  name: "peanutInput",
  props:['modelValue'], // 自定义组件中通过v-model绑定的属性  需要在组件内部使用名为modelValue的props接受
  emits:['update:modelValue'], // 触发的事件名格式必须是 update:modelValue
  methods:{
    inputChange(e){
      this.$emit('update:modelValue',e.target.value)
    }
  }
}
</script>

<style scoped>

</style>

得到如下的效果：

更简洁的方式：计算属性

更简洁的方式就是通过计算属性将子组件中双向绑定的值抛出到父组件，只需要对子组件做如下的改动：

<template>
<!--  直接使用v-model绑定   比另一种绑定的方式更加简洁-->
  <input v-model="modelValue">
</template>

<script>
export default {
  name: "peanutInputComputed",
  props:['modelValue'],
  emits:['update:modelValue'],
  computed:{
  //  子组件中最好不要改动父组件传递过来的值   因此最好是通过计算属性将改变后的值抛出去
    changeValue:{
      get(){
        return this.modelValue
      },
      set(value){
        this.$emit('update:modelValue',value)
      }
    }
  }
}
</script>

<style scoped>

</style>