【Vue】Vue组件间传值的六种方式大汇总

1，方式一：props、事件$emit

    1-1，父组件向子组件传值（props）

      父组件通过在引用子组件时，给子组件绑定属性（数据形式：data、props、computed）子组件通过props进行接收；

// 1-1, 父组件通过props向子组件传值：

  //父组件 App.vue
    
    

  //子组件 son.vue
    
    

   1-2，子组件向父组件传值（通过事件形式）

     子组件通过触发事件（$emit）进行数据传递，在父组件引用子组件时，再进行数据接收

// 1-2, 子组件通过事件（$emit）向父组件传值：

  //父组件 App.vue
    
    

  //子组件 son.vue
    
    

2，方式二：$emit、$on （Bus）

     通过新建Vue实例（Bus）作为中央事件总线（事件中心），用它来触发事件($emit)和监听事件($on),巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

     $on，一般会在 mounted 或 created 钩子中进行数据监听。  【下面是引入依赖vue-bus进行实现，还有其他实现方式】

// 1，安装：vue-bus
   npm install vue-bus

// 2，引入：在main.js中引入vue-bus
   import VueBus from 'vue-bus'
   Vue.use(VueBus)

// 3，传播：组件中通过$on传播
   sendDate(){
      this.$bus.emit("myData","广播的数据");
   }

// 4，接收：组件中通过mounted或created方法接收
    mounted(){
       //通过on监听事件，回调方法获取数据
       this.$bus.on("myData", value => {
                this.receiveData= value;
       })
    }

3，方式三：$attrs、$listeners （属性，事件）

      多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法 $attrs/$listeners。（解决跨级组件传值）

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

      简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

// App.vue



//other.vue

4，方式四：provide、inject

    两者一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。即：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

    provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。为高阶插件/组件库提供用例。

// App.vue




// son.vue

5，方式五：$parent、$children 与 ref、$refs

   $parent和$children：在组件中，直接使用$parent获取父组件的实例，使用$children获取子组件的实例；

   ref和$refs：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。     

• 给子组件指定ref属性：   template:''
• 在父组件中，通过引用得到子组件的实例：  this.$refs.myRef.属性/方法

   这两种方法的弊端是，无法在跨级或兄弟间通信。

 

6，方式六：Vuex

   Vuex封装和使用：https://blog.csdn.net/godsor/article/details/102704835