Vue 组件传值 --深入剖析传值的原理

·  阅读 247
Vue 组件传值 --深入剖析传值的原理

Vue 组件之间传值

叙述:通过vue组件之间的传值可以有效解决组件通信问题,对组件化开发提供一种相互联系的方法与思想。下面就根据实际的例子一起熟悉vue组件通信知识。

一、父组件向子组件传递数据

在 Vue 中,可以使用 props 向子组件传递数据。

子组件

image.png

其中 title需要从props中获取从父组件传过来的值

父组件

image.png

效果图

image.png

二、子组件向父组件传递数据

 子组件主要通过事件传递数据给父组件

 

子组件部分:

image.png

1.当input的值发生变化的时候,将 username 传递给父组件 首先声明一个了方法 setName,用 change 事件来调用 setName

2.在 setName 中,使用了 $emit 来遍历 changename 事件,并返回 this.username

3.其中 changename 是一个自定义的事件,功能类似于一个中转,this.username 将通过这个事件传递给父组件

父组件部分:

image.png

在父组件 中,声明了一个方法 getName,用 changename 事件调用 getName 方法,获取到从子组件传递过来的参数 username

getName 方法中的参数 msg 就是从子组件传递过来的参数 username

效果图

image.png

三、子组件向子组件传递数据

可以利用状态管理插件vuex来实现组件之间的通信,详细的使用大家可以前去学习

希望能帮助到大家对vue的学习,后续会推出更有质量的文章。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改