v-model支input父子组件传值

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件
自定义组件使用v-model，应该有以下操作：

接收一个value prop
触发input事件，并传入新值

<input v-model="inputValue">

相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中
<my-component v-model="inputValue"></my-component>

相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = $event">
</my-component>

这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，
所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。
this.$emit('input', value)

父子组件传值

子组件
<template>
  <div>
     <input type="text" v-model="myValue">
  </div>
</template>

<script>
export default {
    data() {
        return {
            myValue: this.value    
        }
    },
    props: {
        value: {
            type: String,
            default: "我是子组件",
        }
    },
    watch: {
        // 方法监听
        myValue(newValue){
            debugger
            this.$emit('input',newValue) 
            console.log(this.value,"我是子组件value");   
        }
    }  
}
</script>




父组件
<template>
  <div id="app">  
    <button @click="getValue()">点击</button>
    <model-test v-model="name"></model-test>
  </div>
</template>

<script>
import ModelTest from "@/components/model-test.vue"
export default {
  name: 'App',
  components: {   
    ModelTest
  },
  data() {
    return {      
      name: "我是父组件的值"
    }
  },
  methods: {
    getValue(){
      	console.log(this.name,'name');
      }
   }
 }
</script>