vue 组件model,vue中:model的作用
本文主要介绍在组件中使用v-model实现vue的场景。文章围绕主题，详细介绍了内容，有一定的参考价值，有需要的朋友可以参考一下。
目录
一、使用场景二。V-model III的精髓。关键步骤1。1 .道具的用法2。$ emit 3的用法。重点车型四。不带车型选装件1的v型车。父组件home2。子组件homeChild3。效果v .带模型选项的组件使用v-model1，父组件2。子组件
一、使用场景
子组件希望使用父组件的值，并更改父组件的值。
二、V-Model的本质
1.将变量传递给子组件的值。2.监视子组件的输入事件，并将传递的值赋给父组件的变量。
三、关键步骤
1.props的使用
在定制的vue文件中，声明父组件想要传递给子组件的属性，例如
道具：{
//接收字符串和数字类型的值，
my value:[字符串，数字]，
},
注意：myValue这个属性名可以自定义，但是[String，Number]不能写成string [String ， Number]，因为此时它们是构造函数，是js的全局api。
2.$emit的使用
$emit用于发送事件，该事件在自定义组件中触发，例如：
方法：{
changeInput ($event) {
这个。$emit(myInput ，$event.target.value)
},
}
向上发送myInput事件，这样模型监控myInput才有意义：输入一个字符，触发Input事件，然后调度自定义myInput事件，然后模型监控myInput，实现数据绑定。必须注意，这里调度的事件名myInput必须与model中事件的值相同。
PS:通过watch监控输入标签的值，然后$emit调度事件，和通过@input调度事件的效果一样。只要能达到传播的效果，手段多种多样。
3. 关键的model
Model是允许vue自定义组件使用v-model的关键，虽然有时候我们不会显式使用，也不影响我们在自定义组件中使用v-model指令，只是因为设置了默认值。有时，使用显示和定制模型的道具和事件是有益的。这是官网对模型的介绍：
允许自定义组件在使用v-model时自定义属性和事件。默认情况下，组件上的v-model将使用value作为属性，使用input作为事件，但是一些输入类型(如单选按钮和复选框按钮)可能希望将valueprop用于不同的目的。使用模型选项来避免这些情况引起的冲突。
自定义 model 使用示例：
当我们使用模型的缺省值，当值是prop，输入是event时，我们可以省略不写模型。
型号：{
Prop: myValue ，//默认值是Value
事件： myInput ，//默认值是Input
},
四、不使用 model 选项的 v-model
目前，我们不会对模型选项进行特殊设置。示例：
1. 父组件home
模板
home-child v-model= vModelData /home-child
/模板
脚本
从导入HomeChild。/child/HomeChild.vue
导出默认值{
姓名：家，
组件：{
家庭儿童
},
data () {
返回{
vModelData:“你好，虚拟模型”
}
}
}
/脚本
2. 子组件homeChild
模板
div class=box
span{{ value }}/span
Button @click=testVModel 测试v-model/button
/div
/模板
脚本
导出默认值{
姓名：“家庭儿童”，
道具：{
值：{
类型：字符串，
默认值：“”
}
},
方法：{
testVModel () {
这个。$emit(输入，我是子组件)
}
}
}
/脚本
3. 效果
点击前：
点击后：
五、用 model 选项的 组件使用 v-model
1、父组件
模板
div class=home
H3输入实时内容：{{ myValue }}/h3
自定义模型v-model= my value /自定义模型
/div
/模板
脚本
从导入CustomModel。/CustomModel
导出默认值{
姓名：家，
组件：{
自定义模型，
},
data () {
返回{
我的值：“”
}
},
}
/脚本
2. 子组件
模板
！-在定制组件中使用垂直模式指令-
输入类型= search @ input= change input data-my value=
/模板
脚本
导出默认值{
名称：自定义模型，
//当我们使用model的默认值，value为prop，input为event时，可以省略不写model。
型号：{
Prop: myValue ，//默认值是Value
事件： myInput ，//默认值是Input
},
道具：{
//接收字符串和数字类型的值，
//注意不能写成String[ String ， Number]，因为是构造函数和全局变量。
my value:[字符串，数字]，
},
方法：{
changeInput ($event) {
//向上发送myInput事件，这样model监听myInput才有意义：输入字符时触发Input事件，
//然后调度触发定制的myInput事件，然后模型监听myInput，实现数据绑定。
这个。$emit(myInput ，$event.target.value)
},
}
}
/脚本
这就是这篇关于vue在组件中使用v-model的文章。关于使用v-model的vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。