Vue中自定义组件上使用v-model

1、组件上使用v-model

官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。

默认情况下，一个组件上的 v-model 会把 value 用作 prop 

且把 input 用作 event，

但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。

使用 model 选项可以回避这些情况产生的冲突。

简单来讲就是将组件实现数据双向绑定的效果，

需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，

2、组件上使用v-model

v-model其实是可以在组件上使用的，而且适用范围还是挺广的，尤其是在我们写组件的时候，相信很多人都有过在父组件展示一个子组件的行为，但是子组件里面有关闭整个组件的功能，，我们所做的就是在子组件当中通过$emit触发父组件对应的方法，改变父组件上v-if对应的变量控制显示隐藏。

但是有了v-model，这一切都变得很简单，最主要的是完全少了自定义对外暴露的关闭的方法，如果你关闭之后需要回调，那么通过监听你的是否显示的flag即可，所以大可放心使用。

3、父组件

<template>
  <div id="app">
    <HelloWorld v-model="showFlag" v-if="showFlag"></HelloWorld>
    <button @click="showFlag=true">打开组件</button>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld'
 
export default {
  name: 'App',
  data(){
    return {
       showFlag: false
    }
  },
  components: {
    HelloWorld
  }
}
</script>
 
简单说明一下，这里我们引入了我们的子组件HelloWorld，
 
通过showFlag来控制组件的显示隐藏，
 
当然，组件上还用v-model绑定了showFlag，那么我们就来看看子组件是如何搞的吧。复制

4、子组件

<template>
  <div class="hello">
    <h1>这是组件里面的内容</h1>
    <button @click="close">关闭组件</button>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean
    }
  },
  methods: {
    close(){
      this.$emit('change', false)
    }
  }
}
 
 
对于子组件来说，允许自定义使用v-model时定制prop和event，
 
v-model中的prop就是把value用作prop，input用作event，
 
但是为了避免冲突，我们使用model的选项可以回避这些冲突，当然，你也得使用props声明checked这个prop。复制

5、扩展一

vue2 中的v-model

v-model本质上是一个语法糖,如下代码

<input v-model="test">
<!--上面代码本质上就是下方代码-->
<input :value="test" @input="test = $event.target.value">复制

因此，对于一个带有 v-model 的组件（核心用法），它应该如下：

带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件，子组件通过 prop接收一个 value;
子组件利用oninput事件实时通过 $emit 触发父组件input 事件，并传入新值value给父组件；

父组件
 

<template>
    <div>
        <child v-model="msg" @input="msg = $event.target.value" />
        <!--<child :value="msg" @input="msg = $event.target.value" />-->
    </div>
</template>
<script>
import child from './components/Child.vue'
export default {
    components: {
        child
    },
    data() {
        return {
            msg: ''
        }
    }
}
</script>复制

子组件child

<template>
    <input type="text" :value="modelValue" @input="handleInput">
</template>
<script>
export default {
    name: 'Child',
    props:['value'],
    data() {
        return {
            modelValue: this.value
        }
    },
    methods: {
        handleInput(event) {
            this.$emit('input', event)
        }
    }
}复制

vue3中的 v-model

vue3中的v-model默认绑定的不是value，而是modelValue，接收的方法由input改为@update：modelValue。

父组件

<template>
  <child v-model="msg" />
  <p>{{msg}}</p>
</template>
 
<script lang="ts">
import { defineComponent,ref} from 'vue';
import child from './components/child/index.vue'
 
export default defineComponent({
  name: 'App',
  components:{
    child
  },
  setup(){
    const msg = ref('1')
    return{
      msg
    }
  }
});
</script>复制

子组件child

<template>
    <input type="text" :value="modelValue" @input="onInput">
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
    name:'ChildInput',
    props:{
        modelValue:{
            type:String
        }
    },
    setup(props, context){
        const onInput = (e: Event) =>{
            context.emit('update:modelValue',e.target.value)
        }
        return{
            onInput
        }
    }
})
</script>复制

6、扩展二

v-model和.async本质上都是实现双向绑定的语法糖,vue3子组件中自定义实现v-model的方法改为和.sync一致，因此去除.sync，直接用v-model代替。

1.自定义v-model在vue2.x中的实现

//父组件
<template>
    <p>{{title}}</p>
    <VmodelDome v-model="title"/>
</template>
 
 
 
//子组件
<template>
  <div>
    <button @click="$emit('changeTitle','aaa123')">点我</button>
  </div>
</template>
<script>
export default {
  model:{
    prop:'title',           //需要与props中的title相同 
    event:'changeTitle'    //需要与$emit 中的事件名相同
  },
  props:{
    title:{
      type:String,
    }
  }
}
</script>复制

2.sync在vue2.x中的应用

//父组件
<template>   
    <p>{{title}}</p>
    <syncDemo :title.sync="title"> </syncDemo>
</template>
 
//子组件
<template>
  <div>
    <!--约定该事件名，必须为update:后加上需要更新的props即title-->
    <button @click="$emit('update:title','aaa123')">点我</button>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
    }
  }
}
</script>复制

3.v-model在vue3中的实现

//父组件
<template>
    <!-- 自定义 v-model -->
    <p>{{title}}</p>
    <CustomVModel v-model="title"/>
</template>
 
//子组件
<template>
  <div>
    <button @click="$emit('update:title','aaa123')">点我</button>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
    }
  }
}
</script>复制