Vue 组件间传值

---

Vue 组件与组件之间的传值主要分为三种：

• 父组件 传值给 子组件

• 子组件 传值给 父组件

• 组件 间的互相传值
  

  ---

1.父组件传值给子组件

通过 props 传值

父组件传值给子组件，主要通过组件自定义props属性来完成，通过此属性用来接收来自父组件传递的数据，props的值可以是两种，一种是字符串数组；另一种是对象，props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用

---

• 父组件 parent.vue 文件

• 子组件 Child.vue 文件

---

2.子组件传值给父组件

通过 $emit 传值

Vue 中对 $emit 定义为:
vm.$emit( eventName, […args] )

• 参数：
  {string} eventName
[...args]
  触发当前实例上的事件。附加参数都会传给监听器回调

子组件传值给父组件，主要通过自定义事件$emit来完成 ，$emit第一个参数为自定义事件，第二个参数为要传递给父组件的值，父组件在子组件上绑定自定义事件来接收子组件传递的数据

---

• 父组件 parent.vue 文件

• 子组件 Child.vue 文件

---

3.组件间互相传值

Vue 中可以通过一个中间组件 (专门用于数据传递：事件中心) 完成数据的传递，如图：

事件中心.png

---

• 事件中心 ：vm.js

// 引入 Vue
import Vue from "vue"
// 创建一个 Vue 实例对象，专门用于生成实例
const vm = new Vue({})
// 对外暴露实例
export default vm

• 组件 A.vue 文件

• 组件 B.vue 文件