vue组件通讯$parent和$children获取单签组件的⽗组件和当前组件的⼦组件的例子

在 Vue 中，$parent 和 $children 是实例属性，允许你访问组件的父组件和子组件。但是，请注意，这些属性主要用于在开发过程中进行调试和临时访问，并不推荐在正常的组件通信中使用，因为它们破坏了组件的封装性和可重用性。

不过，为了满足你的要求，我将提供一个简单的例子来说明如何使用 $parent 和 $children。

父组件 (ParentComponent.vue)

vue

<template>

  <div>

    <h2>父组件</h2>

    <button @click="accessChild">访问子组件</button>

    <ChildComponent />

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

  components: {

    ChildComponent

  },

  methods: {

    accessChild() {

      // 在这里我们可以访问 $children 数组中的子组件

      // 但通常我们不会这样做，因为这违反了组件的封装性

      if (this.$children.length > 0) {

        console.log('第一个子组件:', this.$children[0]);

      }

    }

  }

}

</script>

 

子组件 (ChildComponent.vue)

vue

<template>

  <div>

    <h3>子组件</h3>

    <button @click="accessParent">访问父组件</button>

  </div>

</template>

 

<script>

export default {

  methods: {

    accessParent() {

      // 在这里我们可以直接访问 $parent

      // 但同样，我们不会这样做，因为它破坏了组件的封装性

      console.log('父组件:', this.$parent);

    }

  }

}

</script>

 

在这个例子中，父组件通过 $children 数组可以访问到它的子组件（尽管我们只知道第一个子组件），而子组件则可以直接通过 $parent 访问到它的父组件。

然而，更好的做法是使用 Vue 的 props 和 events（即 $emit）进行父子组件间的通信。对于更复杂的场景，可以使用 Vuex 进行状态管理，或者使用 provide 和 inject API 在祖先和后代组件之间传递数据。

如果你需要访问特定的子组件，并且不想依赖 $children 数组（因为数组中的组件顺序可能不固定），那么可以考虑使用命名插槽（slot）结合 ref 来进行引用。这样你可以在父组件中通过 $refs 直接访问子组件实例。