Vue 组件之间传值

父子组件的区分：

注意： 在类似 <header></header>我们定义的标签名里操作。

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

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

子组件部分：

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

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

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

父组件部分：

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

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

回顾父组件向子组件传递数据

1. 在子组件中的 props中添加变量
2. 在父组件中，调用子组件名的标签，在标签里使用 v-bind绑定在props里添加的变量。
3. 让 v-bind绑定父组件中data的变量。

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

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

子组件部分：

这是login.vue的HTML部分，当 < input>的值发生变化的时候，将username传递给App.vue
(注意：这里绑定了一个 change事件，类似@click中的click事件）

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

在setUser中，使用了 $emit来遍历transferUser事件，并返回this.username。
其中transferUser是一个自定义的时间，功能类似于一个中转，this.username将通过这个时间传递给父组件

父组件部分：

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

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

回顾子组件向父组件传递数据：

1. 在子组件中定义一个事件，事件绑定了一个方法。
2. 方法中使用 this.$emit("自定义事件名", 要传递的参数)，发射一个我们自定义事件名，并携带要传递的参数。
3. 在组件名标签中调用this.$emit设置的事件，并绑定一个方法
4. 通过绑定的方法获取this.$emit传递的参数，并赋值给父组件中的data中的元素

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

Vue中没有直接子对子传参的方法。为了方便开发，Vue推出了一个状态管理工具Vuex， 可以很方便实现组件之间的参数传递。
下面是vuex的笔记：
链接：vuex百度云笔记
提取码：cqt5