vue在组件中使用v-model的场景
目录
- 一、使用场景
- 二、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,但是一些输入类型比如单选框和复选框按钮可能想使用value
prop 来达到不同的目的。使用model
选项可以回避这些情况产生的冲突。
自定义 model 使用示例:
当我们使用model
的默认值的时候value
作prop
,input
作event
时,可以省略不写model
。
model: { prop: 'myValue', // 默认是value event: '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', // 默认是value event: '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>
到此这篇关于vue在组件中使用v-model的场景的文章就介绍到这了,更多相关vue使用v-model内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!