vue传输数据php,Vue组件之间传递数据的方式是什么？

心已赠人 2022-11-18 04:54 262阅读 0赞

本篇文章给大家带来的内容是介绍Vue组件之间传递数据的方式是什么？让大家了解Vue组件之间的数据传递。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

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

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

子组件部分：

![d1ef7ee8ec3e833af0500b0dbb1131c6.png][]

这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。

如果需要从父组件获取 logo 的值，就需要使用 props: \['logo'\]

![7f42eb78a04562390f06c7081985a2ed.png][]

在 props 中添加了元素之后，就不需要在 data 中再添加变量了

父组件部分：

![87d71fe35ceb580864f0170d78aaab86.png][]

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

![b9a9c40dae778cb007f35eaee74ee450.png][]

然后就能将App.vue中 logoMsg 的值传给 header.vue 了：

![eb1b9d40739f84db66b2074232353237.png][]

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

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

子组件部分：

![7f7b44ff61a2ce6dced870948a3b5a4a.png][]

这是 login.vue 的 HTML 部分，当的值发生变化的时候，将 username 传递给 App.vue

首先声明一个了方法 setUser，用 change 事件来调用 setUser

![377b8292df636a18ad6a3be0b13b4dc2.png][]

在 setUser 中，使用了 $emit来遍历 transferUser 事件，并返回 this.username

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

父组件部分：

![04cd8d55521fc0570a6e1fa8dbfd8e70.png][]

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

![ce6f80423f6040a552beb8ffa1755f55.png][]

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

![144dc40eece0733baf27d4ac09bf956c.gif][]

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

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。

为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递

[d1ef7ee8ec3e833af0500b0dbb1131c6.png]: /images/20221022/0768bff443704df58d6d5c2f10a36421.png
[7f42eb78a04562390f06c7081985a2ed.png]: /images/20221022/1866335a248848d7a9bca69ea67f016c.png
[87d71fe35ceb580864f0170d78aaab86.png]: /images/20221022/3981e2e510b14856a04be585c89cb142.png
[b9a9c40dae778cb007f35eaee74ee450.png]: /images/20221022/d9398b8f2dfe42d786584d5f4ef9a321.png
[eb1b9d40739f84db66b2074232353237.png]: /images/20221022/ec18e8ecea744aca934a6848cf56b880.png
[7f7b44ff61a2ce6dced870948a3b5a4a.png]: /images/20221022/04f3ba82d3df4556b5e2b3a0ca5e414d.png
[377b8292df636a18ad6a3be0b13b4dc2.png]: /images/20221022/eb46648d853c49aba882d5a4d468afe0.png
[04cd8d55521fc0570a6e1fa8dbfd8e70.png]: /images/20221022/0b30574844224f8eb33f5a7a4fc26d20.png
[ce6f80423f6040a552beb8ffa1755f55.png]: /images/20221022/c066cc5412714ecfa544330e21839173.png
[144dc40eece0733baf27d4ac09bf956c.gif]: /images/20221022/4bbf29cf46b74dc8a36ea86867f3fb97.png