前端之家收集整理的这篇文章主要介绍了
Vue.js实战之组件之间的数据传递,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_4040@前言
@H
404_0@Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的
方法才能实现组件之间的数据传递。
@H_
404_0@首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components
文件夹下都是子组件。
<p style="text-align: center">

@H_
404_0@
一、父组件向子组件传递数据
@H_
404_0@在 Vue 中,可以使用 props 向子组件传递数据。
@H_
404_0@子组件部分:

@H_
404_0@这是 header.vue 的 HTML 部分,
logo 是在 data 中定义的变量。
@H_
404_0@如果需要从父组件
获取 logo 的值,就需要使用 props: ['
logo']

@H_
404_0@父组件部分:

@H_
404_0@在
调用组件的时候,使用 v-bind 将
logo 的值绑定为 App.vue 中定义的变量
logoMsg

@H_
404_0@然后就能将App.vue中
logoMsg 的值传给 header.vue 了:

@H_
404_0@
二、子组件向父组件传递数据
@H_
404_0@子组件主要通过事件传递数据给父组件
@H_
404_0@子组件部分:

@H_
404_0@这是 login.vue 的 HTML 部分,当
的值发生变化的时候,将 username 传递给 App.vue
@H_
404_0@首先声明一个了
方法 setUser,用 change 事件来
调用 setUser

@H_
404_0@在 setUser 中,使用了 $emit 来遍历 transferUser 事件,并返回 this.username
@H_
404_0@其中 transferUser 是一个
自定义的事件,
功能类似于一个中转,this.username 将通过这个事件传递给父组件
@H_
404_0@父组件部分:

@H_
404_0@在父组件 App.vue 中,声明了一个
方法 getUser,用 transferUser 事件
调用 getUser
方法,
获取到从子组件传递过来的参数 username

@H_
404_0@getUser
方法中的参数 msg 就是从子组件传递过来的参数 username
@H_403_90@
@H_
404_0@
三、子组件向子组件传递数据
@H_
404_0@Vue 没有直接子对子传参的
方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。
@H_
404_0@为了便于开发,Vue 推出了一个状态管理工具
,可以很方便实现组件之间的参数传递
@H_404_0@
总结
@H_
404_0@以上就是这篇
文章的全部
内容了,希望本文的
内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的
支持。