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