Vue组件间的传值

1.父组件向子组件传值

父组件HTML部分：

 

父组件js部分：

 

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

 

 

 子组件部分：

headers.vue的HTML部分

 

 

 JS部分：

 使用props，从父组件获取logo的值。props['logo']

 

然后就能将Content.vue的值传递给headers.vue了

 

2.子组件向父组件传值：

子组件HTML部分:声明点击事件将搜索框"input1"的值传递给父组件

 

 

 JS部分：

search中，使用了$emit来遍历reportFun,并返回input1的值。

reportFun是自定义事件，功能类似一个中转，this.input1 将通过这个事件传递给父组件

 

 

 父组件部分：

HTML部分：

声明了一个 reportMsg 方法，reportFun方法调用reportFun，获取从子组件传递过来的参数 input1的值。

JS部分：

reportMsg 方法中的参数就是 msg 就是从子组件传递过来的 input1 的值。