巧妙运用v模型实现父子组件传值的方法示例 - 行业资讯 - 肥雀云

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

v模型在内部使用不同的属性为不同的输入元素并抛出不同的事件:

　　<李>文本和文本区域使用价值属性和输入事件;李　　<李>复选框和单选使用检查属性和改变事件;李　　<李>选择字段将价值作为支撑并将变化作为事件。　　　　

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

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

方法总结:
　　

1。子组件设值为道具属性,并且不主动改变值值
　　2.子组件通过这个。释放美元(“输入”、“updateValue”)将updateValue值传给父组件
　　3.父组件通过v模型=" localValue "绑定一个本地变量,即可实现子组件价值值与父组件updateValue值同步更新
　　

<强>举例
　　

<强>子组件
　　

子组件,包含一个按钮,并且将价值属性设为道具(因为v模型使用的是价值属性)。

点击按钮时,求和值加1,同时通过这个。美元发出(“输入”+ +总和)将更新后的值传给父组件(前提:传给父组件的值一定是你想赋给值的)

　　　　　　& lt; template> 　　& lt; div> 　　& lt;按钮@click="增加"祝辞increase 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　让金额=0 　　出口默认{ 　　名称:“vmodel”, 　　道具:{ 　　价值:{ 　　类型:数字, 　　默认值:0 　　} 　　}, 　　方法:{ 　　增加(){ 　　这一点。美元发出(“输入”+ +总和) 　　控制台。日志(value1, this.value) 　　　　setTimeout(()=比;{ 　　控制台。日志(value2, this.value) 　　},50) 　　} 　　} 　　} 　　& lt;/script> 　　之前　　　　

<>强父组件
　　

父组件中,通过v模型绑定一个本地变量,即可实现子父组件同步更新

　　　　　　& lt; div> 　　& lt;增加v模型=" rangeValue "祝辞& lt;/increase> 　　& lt; p>价值:{{rangeValue}} & lt;/p> 　　& lt;/div> 　　& lt; script> 　　数据(){ 　　返回{ 　　rangeValue: 0 　　} 　　} 　　& lt;/script> 　　之前　　　　

实际上,这个过程是首先子组件通过美元发出(“输入”)更新父组件的本地变量,然后子组件中属的价值性通过道具得以更新

这种方式尤其适合子父组件传参的情况(子父组件同步更新)
　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。