vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信
2017-08-05 15:47
627 查看
博客:https://fisher-zh.github.io/
在Vue中,我们可以使用prop属性来进行父子组件间的通信,在之前的文章Vue踩坑之路–父子组件通信总结中有介绍过。
但是prop 是单向绑定的,我们无法在组件中直接修改prop传递的属性。
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。官方文档解释
当然我们可以通过emit在子组件中触发某些事件从而在父组件中修改该数据,这种方法肯定不是最理想的。
在Vue中,能够进行数据双向绑定的属性,我们应该最先想到的是v-model,绑定input的value值,当我们修改value值的同时能够改变数据。那么我们能不能利用v-model这一特点来实现父子组件间某些数据的双向绑定呢?
当然能! 要不我写这个干什么(逃…)
在Vue中,我们可以使用prop属性来进行父子组件间的通信,在之前的文章Vue踩坑之路–父子组件通信总结中有介绍过。
但是prop 是单向绑定的,我们无法在组件中直接修改prop传递的属性。
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。官方文档解释
当然我们可以通过emit在子组件中触发某些事件从而在父组件中修改该数据,这种方法肯定不是最理想的。
在Vue中,能够进行数据双向绑定的属性,我们应该最先想到的是v-model,绑定input的value值,当我们修改value值的同时能够改变数据。那么我们能不能利用v-model这一特点来实现父子组件间某些数据的双向绑定呢?
当然能! 要不我写这个干什么(逃…)
<div> <child v-model="message"></child> <!-- 通过v-model将message绑定在child上 --> </div>
// 子组件 export default { name: '', props: { // 通过value获取绑定message值 value: { type: String, default: '' } }, data: { // 你的数据 }, methods: { changeMessage() { // 通过触发组件的input事件改变message的值, // 此时父组件中的message值就改变为你设置的值了 this.$emit('input', 'your message value') } } })
相关文章推荐
- vue项目中v-model父子组件通信的实现详解
- 利用v-model实现父子组件间的双向通信
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
- Angularjs2-下拉列表实现(父子组件通信)
- Angular 2父子组件之间共享服务通信的实现
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
- Delphi环境下利用TComm组件实现串行通信
- vue2.0父子组件间通信的实现方法
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- Vue2.x中的父子组件相互通信的实现方法
- 利用共享存储实现父子进程间的通信
- 利用Vue v-model实现一个自定义的表单组件
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- Adnroid利用AIDL实现Service间的双向通信
- Vue父子组件双向绑定传值的实现方法
- 虚拟机利用Host-only实现在不插网线的情况下,虚拟机与主机实现双向通信,实现ssh连接以及samba服务实现共享
- 利用VB.Net编程实现PC与掌上电脑PPC间的双向通信
- vue父子组件传值,实现深度监听对象,双向绑定
- Delphi 利用TComm组件 Spcomm 实现串行通信