详解vue 自定义组件使用v-model 及探究其中原理

<template>
 <div id="app">
  <p>{{name}}</p>
  <MyInput v-model="name"/>
 </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
 name: 'app',
 data(){
  return {
   name: 132
  }
 },
 components: {
  MyInput
 },
}
</script>

<template>
  <div>
    <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
  </div>
</template>
<script>
export default {
 name: "MyInput",
 props: {
  value: ""
 },
};
</script>

<input type="text" v-bind:value="name" v-on:input="event=>name=event.target.value" />

<MyInput type="text" v-bind:value="value" v-on:input="value=>name=value" />