摘要：如何巧妙利用实现父子组件传值通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。但是熟悉上面的实现原理后，我们可以巧妙地运用这一原理在内部使用不同的属性为不同的输入元素并抛出不同的事件。
v-model介绍
熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。
以下摘取自Vue官方文档
如何巧妙利用 v-model实现父子组件传值v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：
text 和 textarea 使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。
但是熟悉上面 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 的）
父组件中，通过 v-model 绑定一个本地变量，即可实现子父组件同步更新
value:{{rangeValue}}
实际上，这个过程是首先子组件通过 $emit("input") 更新父组件的本地变量，然后子组件中的 value 属性通过 props 得以更新
总结这种方式尤其适合子父组件传参的情况（子父组件同步更新）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103215.html
摘要：子组件也属于当前实例。监听钩子函数的场景使用的不多，但是还是要知道的。可以获取到父组件传递的除和外的所有自定义属性。 一. 父组件向子组件传值 创建parent和child组件，并在parent中注册child组件 在父组件调用子组件标签中添加一个自定义属性(msg)， im...
摘要：的单向数据传递直接作为一个本地变量下面是我的子组件这是父组件给我传的数据运行结果如下图子组件向父组件传递数据基本使用子组件向父组件传递数据，不能像上面一样实时的传递数据，必须通过事件触发。 组件是Vue核心功能之一，合理的组件化，可以减少我们代码的冗余，提高项目的可维护性。下面，我将由浅入深的讲Vue的组件在讲之前，首先我们先了解一下组件的命名。 HTML是对特征名不敏感的语言，他...
摘要：初始化项目安装脚手架切换至项目目录初始化项目开启实时编译小程序生命周期页面加载一个页面只会调用一次。页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。组件路径，组件对应的方法路由的应用调起提示框 1.初始化wepy项目 安装脚手架 npm install -g wepy-cli wepy init standard my-project 切换至项目...
阅读 1929·2019-08-30 15:52
阅读 2307·2019-08-29 18:37
阅读 664·2019-08-29 12:33
阅读 2729·2019-08-29 11:04
阅读 1305·2019-08-27 10:57
阅读 1969·2019-08-26 13:38
阅读 2644·2019-08-26 12:25
阅读 2295·2019-08-26 12:23
