Vue 在组件上使用 v-model

v-model 双向数据绑定

简单理解: 相当于在input上动态绑定了value, 又在input绑定了input事件

在组件上使用

在组件上使用 v-model 会默认在组件上添加

1. 默认自定义属性( value )
2. 默认自定义事件( input )

小栗子:

<template>
  <div>
    这里是父组件<br>
    {{ name }}
    <hr>
    <Son1 v-model="name"></Son1>
  </div>
</template>

<script>
import Son1 from './son.vue'
export default {
  data () {
    return {
      name: '小红'
    }
  },
  components: { Son1 }
}
</script>

<template>
  <div class="son">
    这里是子组件<br>
    {{ value }}
    <button @click="changeName">修改value</button>
    
  </div>
</template>
<script>
  export default {
    props: ['value'],
    methods: {
      changeName () {
        this.$emit('input', '小明')
      }
    }
  }
</script>

子组件可以这样简写

<template>
  <div class="son">
    这里是子组件<br>
    {{ value }}
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>
<script>
  export default {
    props: ['value']
  }
</script>