vue中的$attrs和$listeners

A組件與C組件怎么通信，我們有多少種解決方案？

1. 我們使用VueX來進行數據管理，但是如果項目中多個組件共享狀態比較少，項目比較小，並且全局狀態比較少,那使用VueX來實現該功能，並沒有發揮出VueX的威力。
2. 使用B來做中轉站，當A組件需要把信息傳給C組件時，B接受A組件的信息，然后利用屬性傳給C組件，這是一種解決方案，但是如果嵌套的組件過多，會導致代碼繁瑣，代碼維護比較困難;如果C中狀態的改變需要傳遞給A, 使用事件系統一級級往上傳遞 。本來
3. 自定義一個Vue 中央數據總線，這個情況適合碰到組件跨級傳遞消息，但是使用VueX感覺又有點浪費的項目中，但是缺點是，碰到多人合作時，代碼的維護性較低，代碼可讀性低

在很多開發情況下，我們只是想把A組件的信息傳遞給C組件，如果使用props 綁定來進行信息的傳遞，雖然能夠實現，但是代碼並不美觀。

在vue2.4中，為了解決該需求，引入了$attrs 和$listeners ， 新增了inheritAttrs 選項。 在版本2.4以前，默認情況下父作用域的不被認作props的屬性屬性百年孤獨，將會“回退”且作為普通的HTML特性應用在子組件的根元素上。如下列的例子

father.vue 組件：

<template>
  <child :name="name"
         :age="age"
         :infoObj="infoObj"
         @updateInfo="updateInfo"
         @delInfo="delInfo" />
</template>
<script>
import Child from './child.vue'

export default {
  name: 'father',
  components: { Child },
  data () {
    return {
      name: 'myName',
      age: 22,
      infoObj: {
        from: '北京',
        hobby: ['1', '2', '3']
      }
    }
  },
  methods: {
    updateInfo () {
      console.log('update info')
    },
    delInfo () {
      console.log('delete info')
    }
  }
}
</script>

child.vue 組件：

<template>
    <grand-son :height='height' :weight='weight' @addInfo="addInfo" v-bind="$attrs" v-on="$listeners"  />
</template>
<script>
import GrandSon from './grandSon'
export default {
  name: 'child',
  components: { GrandSon },
  props: ['name'],
  data () {
    return {
      height: '180cm',
      weight: '70kg'
    }
  },
  created () {
    console.log(this.$attrs, 'child $attrs')
    // 結果：age, infoObj, 因為父組件共傳來name, age, infoObj三個值，由於name被 props接收了，所以只有age, infoObj屬性
    console.log(this.$listeners, 'child $listeners') // updateInfo: f, delInfo: f
  },
  methods: {
    addInfo () {
      console.log('add info')
    }
  }
}
</script>

grandSon.vue組件：

<template>
    <div>
        {{ $attrs }}
    </div>
</template>
<script>
export default {
  props: ['weight'],
  created () {
    console.log(this.$attrs, 'grandSon attrs')
    console.log(this.$listeners, 'grandSon listeners') // updateInfo: f, delInfo: f, addInfo: f
    // this.$listeners.updateInfo() //和下面$emit同等效果
    // this.$emit('updateInfo') // 可以觸發 father 組件中的updateInfo函數
  }
}
</script>

 

轉載修改於:https://blog.csdn.net/songxiugongwang/article/details/84001967