vue-在组件中使用v-model

一、使用场景

子组件想要使用父组件的值,又想去改父组件的值

二、V-Model的本质

1.给子组件的

value

传个变量

2.监听子组件的

input

事件,并且把传过来的值赋给父组件的变量

三、关键步骤

1.

props

的使用

在自定义的 vue 文件中，声明父组件要向子组件传递的

prop

属性，例如

 props: {// 接收string和number类型的值，myValue: [String, Number],}, 

注意：

myValue

这个属性名称是可以自定义的，但

[String, Number]

不能写成字符串

["String","Number"]

,因为此时它们是构造器，是

js

的全局

api

。

2.

$emit

的使用

$emit

用于向上派发事件，在自定义组件中触发，例如：

methods: {changeInput ($event) {this.$emit('myInput', $event.target.value) },
} 

向上派发

myInput

事件，这样

model

监听

myInput

才有意义： 当输入字符时触发

input

事件，进而派发触发自定义的

myInput

事件， 然后

model

监听

myInput

，就实现了数据绑定。必须注意，这里的派发事件名

myInput

必须和

model

中的event的值相同。

PS: 通过

watch

监听

input

标签的值，然后

$emit

派发事件，和通过

@input

派发事件具有一样的效果。只要能达到通信的效果即可，手段是多样的。

3. 关键的

model

model

是允许 vue 自定义组件使用

v-model

的关键，虽然有时我们不显性的使用它，也不影响我们在自定义组件中使用

v-model

指令，这只是因为被设置默认值。而有的时候，显示的使用，并自定义

model

的

prop

和

event

会有益。这是官网关于

model

的介绍：

允许一个自定义组件在使用

v-model

时定制 prop 和 event。默认情况下，一个组件上的

v-model

会把

value

用作 prop 且把

input

用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用

value

prop 来达到不同的目的。使用

model

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

自定义 model 使用示例：

当我们使用

model

的默认值的时候

value

作

prop

，

input

作

event

时，可以省略不写

model

。

model: {prop: 'myValue', // 默认是valueevent: 'myInput', // 默认是input
}, 

四、不使用 model 选项的 v-model

当前🌰 , 我们不对 model 选项进行特殊设置 示例：

1. 父组件

home

<template><home-child v-model="vModelData"></home-child>
</template>

<script>
import HomeChild from './child/HomeChild.vue'
export default {name: 'Home',components: {HomeChild},data () {return {vModelData: 'hello v-model'}}
}
</script> 

2. 子组件

homeChild

<template><div class="box"><span>{{ value }}</span><button @click="testVModel">测试v-model</button></div>
</template>

<script>
export default {name: 'HomeChild',props: {value: {type: String,default: ''}},methods: {testVModel () {this.$emit('input', '我是子组件')}}
}
</script> 

3. 效果

点击前

点击后

五、用 model 选项的 组件使用 v-model

1、父组件

<template><div class="home"><h3>输入的实时内容：{{ myValue }}</h3><custom-model v-model="myValue"></custom-model></div>
</template>
<script>
import CustomModel from './CustomModel'
export default {name: 'Home',components: {CustomModel,},data () {return {myValue: ''}},
}
</script> 

2. 子组件

<template><!-- 自定义组件中使用v-mode指令 --><input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {name: 'CustomModel',// 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。model: {prop: 'myValue', // 默认是valueevent: 'myInput', // 默认是input},props: {// 接收string和number类型的值，// 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量myValue: [String, Number],},methods: {changeInput ($event) {// 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，// 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定this.$emit('myInput', $event.target.value)},}
}
</script>