父组件向子组件传值

简短说来就是，父组件通过标签动态绑定来传递数据，子组件通过props，以数组的形势来接收。

首先写一个子组件header.vue。

html部分：

image.png

如果要从父组件接收数据，那么就要使用props。这个logo是在父组件中定义的。

js部分：

image.png

父组件部分：在父组件中注册子组件。 logo就是子组件中接收的名字。后面是要传送的数据。

image.png

image.png

子组件向父组件传值

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

子组件部分：要将input输入的用户名传到父组件中去。首先声明一个了方法 setUser，用 change 事件来调用 setUser。在setUser方法中通过this.$eimt来遍历 transferUser 事件，并返回 this.username。

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

image.png

image.png

父组件部分

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

image.png

image.png

image.png