$attrs,$listeners

news2024/11/16 10:26:00

vue实现组件通信的方式有：

父子通信
父组件向子组件传递通过props定义各个属性来传递，子组件向父组件传递通过$emit触发事件
ref也可以访问组件实例
跨级通信
vuex
bus
provide / inject
$attrs / $listeners
解释 $attrs / $listeners
$attrs 将父组件中不被认为是props特性绑定的属性（即在父组件中或者中间组件中没有在props中定义的属性）传到孙组件中；
$listeners 将父组件标签上的自定义事件向下传递，其子组件可以直接通过$emit的方式调用；
父组件传值给子组件，子组件可以全部不接受，然后通过v-bind=“$attrs”，传给孙组件，然后孙组件直接使用props接受父组件传过来的所有属性普通的emit只能从子组件传到父组件，通过$listeners可以实现从孙子组件把事件传到父组件中去，不需要通过$emit逐层传递；

<!-- A.vue -->
<template>
  <div>
    <p>这是父组件</p>
    <p>参数: name="fu" age="60" sex="nan-fu" address="shanghai-fu"</p>
    <hr>
    <B name="fu" age="60" sex="nan-fu" address="shanghai-fu" v-bind="$attrs" @setVal="getFuDetail"></B>
  </div>
</template>

<script>
import B from './B'
export default {
  components: {
    B,
  },
  methods: {
    getFuDetail(val) {
      console.log('这是父组件的方法', val)
    }
  }
}
</script>

<style>

</style>

<!-- B.vue -->
<template>
  <div>
    <p>这是子组件</p>
    <p>参数：name="zi" address="beijing-zi"</p>
    <p>props: name</p>
    <p>attrs: {{ $attrs }}</p>
    <p>因为在B组件中props中包含name， 所以在attrs中，只有age,sex,address</p>
    <hr>
    <C name="zi" address="beijing-zi" v-on="$listeners"></C>
  </div>
</template>

<script>
import C from './C.vue'
export default {
  components: {
    C,
  },
  props: {
    name: { type: String, default: ''},
  },
  methods: {
    getZiDetail() {
      console.log('这是子组件的方法')
    }
  }

}
</script>

<style>

</style>

<!-- C.vue -->
<template>
  <div>
    <p>这是孙子组件</p>
    <p>props: age</p>
    <p>attrs: {{ $attrs }}</p>
    <p>因为在C组件中props定义了age， 所以attrs中包含:父组件的name, sex, address，子组件的name, address,而子组件的name, address覆盖了父组件的name, address</p>
    <hr>
  </div>
</template>

<script>
export default {
  props: {
    age: { type: String, default: ''},
  },
  created() {
    this.getSunDetail()
  },
  methods: {
    getSunDetail() {
      console.log('这是孙组件的方法')
      this.$emit('setVal','通过$listeners触发父组件的事件')
    }
  }
}
</script>

<style>

</style>