Vue组件中如何运用v-model实现双向数据绑定？

本文共计978个文字，预计阅读时间需要4分钟。

目录

一、使用场景

二、V-Model的本质

三、关键步骤

1.props的使用

2.$emit的使用

3.关键的model

四、不使用model的选择项

1.父组件home

2.子组件homeChild

3.影响

五、使用model选项

1.父组件home

2.子组件homeChild

3.影响

目录

• 一、使用场景
• 二、V-Model的本质
• 三、关键步骤
• 1.props的使用
• 2.$emit的使用
• 3. 关键的model
• 四、不使用 model 选项的 v-model
• 1. 父组件home
• 2. 子组件homeChild
• 3. 效果
• 五、用 model 选项的 组件使用 v-model
• 1、父组件
• 2. 子组件

一、使用场景

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

二、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，但是一些输入类型比如单选框和复选框按钮可能想使用valueprop 来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

自定义 model 使用示例：

当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。

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

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

当前