巧妙运用v-model实现父子组件传值的方法示例-创新互联

v-model介绍

成都创新互联-专业网站定制、快速模板网站建设、高性价比静安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式静安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖静安地区。费用合理售后完善，10余年实体公司更值得信赖。

熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。
以下摘取自Vue官方文档

v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：

• text 和 textarea 使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

如何巧妙利用 v-model实现父子组件传值

通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。

但是熟悉上面 v-model 的实现原理后，我们可以巧妙地运用这一原理（v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件）。

方法总结：

1.子组件设 value 为props属性，并且不主动改变 value 值
2.子组件通过 this.$emit('input', 'updateValue') 将 updateValue 值传给父组件
3.父组件通过 v-model="localValue" 绑定一个本地变量，即可实现子组件value值与父组件updateValue 值同步更新

举例

子组件

子组件，包含一个button，并且将 value 属性设为props（ 因为v-model使用的是 value属性 ）。

点击button时，sum值加1，同时通过 this.$emit('input', ++sum) 将更新后的值传给父组件（前提：传给父组件的值一定是你想赋给 value 的）

<template>
 <div>
  <button @click="increase" >increase</button>
 </div>
</template>
<script>
let sum = 0
export default {
 name: 'vmodel',
 props: {
  value: {
   type: Number,
   default: 0
  }
 },
 methods: {
  increase () {
   this.$emit('input', ++sum)
   console.log('value1', this.value)
  
   setTimeout(() => {
    console.log('value2', this.value)
   }, 50)
  }
 }
}
</script>

网站题目：巧妙运用v-model实现父子组件传值的方法示例-创新互联
网站地址：https://www.cdcxhl.com/article8/coicip.html

成都网站建设公司_创新互联，为您提供外贸网站建设、关键词优化、网站制作、全网营销推广、虚拟主机、企业网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联