vue2中 attrs 和 listeners 的使用（组件通信）

vue2中 attrs 和 listeners 的使用（组件通信）

vue2.4.0新增$attrs和$listener属性

• attrs

  当一个组件没有声明任何 prop 时，$attrs会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件，一般用在子组件的子元素上

• listener

  包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

<template>
  <div class="page-all">
    a-page
    <B :msg1="msg1" :msg2="msg2" @method1="handleClick" @method2="handleClick"></B>
  </div>
</template>

<script>
import B from "./B.vue"

export default {
  name: "A",
  data() {
    return {
      msg1: "msg1",
      msg2: "msg2",
    }
  },
  components: {B},
  methods: {
    handleClick() {
      console.log('a click')
    }
  },
  mounted() {},
}
</script>

<template>
  <div class="page-all">
    b-page
    <p>$attrs: {
   
   { $attrs }}</p>
    <div @click="handleAClick">handleAClick: {
   
   { msg1 }}</div>
    <C v-bind="$attrs" v-on="$listeners"></C>
  </div>
</template>

<script>
import C from "./C.vue"

export default {
  name: "B",
  props: ['msg1'],
  data() {
    return {}
  },
  components: {C},
  methods: {
    handleAClick() {
      console.log('b click')
      this.$emit('method1')
    }
  },
  mounted() {},
}
</script>

<template>
  <div class="page-all">
    c-page
    <p>$attrs: {
   
   { $attrs }}</p>
    <div @click="handleCClick">handleCClick: {
   
   { msg1 }}{
   
   { msg2 }}</div>
  </div>
</template>

<script>
export default {
  name: "C",
  props: ['msg1', 'msg2'],
  data() {
    return {}
  },
  components: {},
  methods: {
    handleCClick() {
      console.log('c click')
      this.$emit('method2')
    }
  },
  mounted() {},
}
</script>

• 总结

  $attrs是把父组件发送但本组件props不接收的下发到孙子组件，而listener是把父组件的@方法继承到孙子组件