vue2组件传值大全

参考：【Vue2从入门到精通】深入浅出，带你彻底搞懂Vue2组件通信的9种方式_vue2组件通信方式-CSDN博客 

参考：一文搞懂Vue2中的组件通信_vue.js_脚本之家

Vue组件间通信分类

Vue组件间通信主要指以下 34类：

①父子组件通信②隔代组件通信③兄弟组件通信④不相关组件传值

下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

1.props / $emit

①父组件向子组件传值

        下面通过一个例子说明父组件如何向子组件传递数据：在子组件child.vue中如何获取父组件parents.vue中的数据obj：

// 父组件 parents.vue
 
 ​
 
 ​
 // 子组件 child.vue
 
 ​
 

②子组件向父组件传值 

        使用$emit，下面使用例子说明：

//  父组件 parents.vue
 
 ​
 
//子组件 child.vue
 
 ​
 

2.$parent / $children

适用于父子组件通信

$parent / $children：访问父 / 子实例

// 父组件中
 
 ​
 
 // 子组件中childA 
 
 ​
 

3.$ref

父组件通过$ref拿到子组件实例，通过实例修改子组件数据：

// 子组件child等着被改就行

4.EventBus （$emit / $on） 

适用于隔代组件通信，eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难，下面分步骤讲解：

①初始化

new Vue({
  router,
  store,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this //安装全局事件总线，所有组件都能看到$bus
  }
}).$mount('#app')

②发送事件

this.$bus.$emit("uptOrderDialogVisible", true)

③接收事件

this.$bus.$on("uptOrderDialogVisible", (e) => {console.log(e)})

④销毁事件

 this.$bus.$off("uptOrderDialogVisible");

5. attrs / listeners

// 父组件parents.vue






// 儿子组件son




// 孙子组件

6.provide / inject 

 适用于隔代组件通信，举例说明：

假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件，B是A的子组件

// A.vue
 ​
 
 ​
 
 // B.vue
 ​
 
 ​
 
 // C.vue
 
 ​