vue自定义组件使用v-model实现双向数据绑定

默认情况下，组件上的v-model使用modelValue 作为props和update：modelValue作为事件。我们通过向v-model传递参数来修改这些名称

父组件代码

在本例子中，子组件将需要一个foo props并发出update:foo要同步的事件：

<template>
  <HelloWorld  @submit="doLogin" :foo="bar"></HelloWorld>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      bar:'',
    }
  },
  methods: {
    doLogin(e){
      console.log('--',e)
    }
  },
}
</script>

<style>
</style>

子组件代码

<template>
  <div class="hello">
    <h2>登陆组件</h2>
    <input type="text" v-model="username">
    <input type="text" v-model="password">
    <button @click="doLogin">执行登陆</button>
    <div>
      <input type="text" placeholder="请输入内容" :value="foo" @input="$emit('update:foo',$event.target.value)">  <!--foo 与props接收的名字一样-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    foo:String
  },
  data(){
    return {

    }
  },
  methods: {

  },
}
</script>
<style scoped>

</style>

上面就是vue自定义组件使用v-model实现双向数据绑定的基本方法。