vue变量传值_深入理解Vue 组件之间传值

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

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

子组件部分：

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

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

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

父组件部分：

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

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

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

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

子组件部分：

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

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

在 setUser 中࿰