Vue 组件之间传值
叙述:通过vue组件之间的传值可以有效解决组件通信问题,对组件化开发提供一种相互联系的方法与思想。下面就根据实际的例子一起熟悉vue组件通信知识。
一、父组件向子组件传递数据
在 Vue 中,可以使用 props 向子组件传递数据。
子组件
其中 title需要从props中获取从父组件传过来的值
父组件
效果图
二、子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
子组件部分:
1.当input的值发生变化的时候,将 username 传递给父组件 首先声明一个了方法 setName,用 change 事件来调用 setName
2.在 setName 中,使用了 $emit 来遍历 changename 事件,并返回 this.username
3.其中 changename 是一个自定义的事件,功能类似于一个中转,this.username 将通过这个事件传递给父组件
父组件部分:
在父组件 中,声明了一个方法 getName,用 changename 事件调用 getName 方法,获取到从子组件传递过来的参数 username
getName 方法中的参数 msg 就是从子组件传递过来的参数 username
效果图
三、子组件向子组件传递数据
可以利用状态管理插件vuex来实现组件之间的通信,详细的使用大家可以前去学习
希望能帮助到大家对vue的学习,后续会推出更有质量的文章。