说说v-model

34 篇文章 1 订阅
1.v-model是什么?

简单说,v-model其实就是一个语法糖而已。
简单举例,一个input元素进行了v-model的绑定,那么这个时候其实也就是进行了value属性的绑定以及input事件的绑定。

<input v-model="data"/>
//实际上等于
<input :value="data" @input="val => data = val"/>

当然,对于不同的元素来说,v-model语法糖简化的属性也不相同,例如在单选框上绑定的就是change事件,这里就不一一举例了。

2.v-model仅仅是语法糖吗?

其实,v-model也有创建响应式数据的功能。例如我们经常有一个很多字段的表单元素,一般情况下我们只会创建一个对象,并不会把里面的属性一一创建,但是使用v-model绑定一个对象的不存在的属性,它就会为我们自动创建该属性,并且该属性是响应式的。

<template>
	//会在form自动创建name属性,并监听变化。
	<input v-model="form.name" />
</template>
<script>
	data() {
		return {
			form: {}
		}
	}
</script>

3.在组件上使用v-model

v-model除了在表单上进行使用外,还经常使用在组件上。对组件使用后,相当于给组件传递了一个默认的props属性,里面有一个默认属性value。还有一个默认的input触发函数。当然value属性和input事件名都可以通过model属性进行修改

//父组件
<son v-model="parentData"></son>

//子组件
<script>
export default {
  name: 'son',
  components: {},
  // 父组件使用v-model相当于给子组件传了一个value值,注意如果要使用该值必须先使用prop接收
  // props: {
  //   value: {
  //     type: Number,
  //     default: 99
  //   },
  // },
  props: ['parentData'],
  //可以使用model元素给value与innput取别名
  model: {
    prop: 'parentData',
    event: 'changeParentData'
  },
  data () {
    return {
    };
  },
  methods: {
  	//触发事件
    change() {
      this.$emit('changeParentData', 2)
    }
  }
}
</script>

4.v-model的特性

v-model是单项数据流的双向数据绑定。

什么叫单项数据流?就是父组件传递给子组件,但是子组件并不能直接修改父组件的值,而是通过事件告知父组件子组件需要修改值,让父组件进行更新。

什么叫双向数据绑定?就是视图层与数据源相互作用,例如我们直接修改data里面的属性值,视图也会跟着变化,但是我们直接在输入框进行输入,data里的属性值也会随之变化。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值