祖孙组件的通信：巧用 $attrs 和 $listeners

2023-11-27 07:47:53

在 Vue.js 的组件系统中，父组件和子组件之间的通信是一个常见且重要的任务。然而，当涉及到祖孙组件之间的通信时，事情可能会变得有点棘手。

$attrs

attrs 属性是一个特殊对象，它包含父组件传递给子组件的所有非 props 属性。通过 attrs，子组件可以访问这些属性，即使它们没有被显式声明为 props。

以下示例展示了如何在祖孙组件之间使用 $attrs 进行通信：

<!-- 祖父母组件 -->
<template>
  <Grandchild :data="grandchildData"></Grandchild>
</template>

<script>
export default {
  data() {
    return {
      grandchildData: {
        name: 'John Doe',
        age: 30
      }
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <Child>
    <Grandchild></Grandchild>
  </Child>
</template>

<script>
export default {
  data() {
    return {
      childData: {
        hobby: 'Coding'
      }
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <Grandchild :data="childData"></Grandchild>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      grandchildData: {
        address: '123 Main Street'
      }
    }
  }
}
</script>

<!-- 孙组件 -->
<template>
  <p>Name: {{ data.name }}</p>
  <p>Age: {{ data.age }}</p>
  <p>Hobby: {{ data.hobby }}</p>
  <p>Address: {{ data.address }}</p>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      grandchildData: {
        school: 'ABC School'
      }
    }
  }
}
</script>

在这个示例中，祖父母组件通过 attrs 将 `grandchildData` 传递给父组件。父组件也通过 attrs 将 childData 传递给子组件。最后，子组件将这两个对象传递给孙组件。通过这种方式，孙组件可以访问所有三个对象中的数据：name、age、hobby 和 address。

$listeners

listeners 属性是一个特殊对象，它包含父组件传递给子组件的所有事件监听器。通过 listeners，子组件可以在父组件中为事件添加监听器，即使这些事件没有被显式声明为 props。

以下示例展示了如何在祖孙组件之间使用 $listeners 进行通信：

<!-- 祖父母组件 -->
<template>
  <Grandchild @click="grandchildClicked"></Grandchild>
</template>

<script>
export default {
  methods: {
    grandchildClicked() {
      alert('Grandchild was clicked!');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <Child>
    <Grandchild></Grandchild>
  </Child>
</template>

<script>
export default {
  data() {
    return {
      childData: {
        hobby: 'Coding'
      }
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <Grandchild @click="childClicked"></Grandchild>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      grandchildData: {
        address: '123 Main Street'
      }
    }
  },
  methods: {
    childClicked() {
      alert('Child was clicked!');
    }
  }
}
</script>

<!-- 孙组件 -->
<template>
  <button @click="$listeners.click">Click me!</button>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      grandchildData: {
        school: 'ABC School'
      }
    }
  }
}
</script>