组件传值 Vue

1.父传子

2.子改变父

3.兄弟组件

4.vuex

5.provide inject

一，父传子，具体用法

创建一个父组件 Father.vue

创建一个子组件 Children.vue

将子组件注册引入到父组件

在父组件里面定义一个data count：1

接着在子组件

 

 因为他们都是在pages 下面首页显示，引入就可以展示出来了

父组件向子组件传值成功
总结一下：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

二，子传父

在children.vue 中 创建一个点击事件，通过$emit 传入参数 

在父体中，接收传过来的参数e

 完成需要，点击按钮，打印出

子组件向父组件传值成功
总结一下：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

• 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

• 子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.$emit 来遍历 getData 事件，最后返回 this.msg

• (5条消息) 浅谈Vue组件传参（常见的几种通信方式）_why_Because的博客-优快云博客_vue组件通信几种方式