面试题：在 Vue 子组件中如何访问父组件的实例？

在 Vue 中，子组件可以通过以下几种方式访问父组件的实例：

1. 通过 `$parent` 属性

Vue 提供了 $parent 属性，允许子组件直接访问父组件的实例。

// 子组件中
this.$parent // 访问父组件实例

示例：

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="showParentMessage">Show Parent Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    showParentMessage() {
      console.log(this.$parent.parentMessage); // 输出: Hello from Parent
    },
  },
};
</script>

注意：

使用 $parent 可能会导致组件之间的耦合性变高，不利于组件的复用和维护。
如果组件层级嵌套较深，$parent 可能无法直接访问到目标父组件。

2. 通过 `props` 传递数据

父组件可以通过 props 将数据或方法传递给子组件，子组件通过 props 访问父组件的数据或调用父组件的方法。

示例：

// 父组件
<template>
  <div>
    <ChildComponent :parentMessage="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ parentMessage }}</p>
  </div>
</template>

<script>
export default {
  props: {
    parentMessage: {
      type: String,
      required: true,
    },
  },
};
</script>

优点：

通过 props 传递数据是 Vue 推荐的方式，符合单向数据流的原则，组件之间的耦合性较低。

3. 通过 `$emit` 和事件通信

子组件可以通过 $emit 触发事件，父组件监听事件并执行相应的逻辑。

示例：

// 父组件
<template>
  <div>
    <ChildComponent @show-message="handleShowMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleShowMessage(message) {
      console.log(message); // 输出: Hello from Parent
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('show-message', 'Hello from Parent');
    },
  },
};
</script>

优点：

通过事件通信可以实现父子组件之间的解耦。

4. 通过 `provide/inject`

Vue 提供了 provide 和 inject 机制，允许父组件向深层嵌套的子组件传递数据或方法。

示例：

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ parentMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['parentMessage'],
};
</script>

优点：

适合跨层级组件通信，避免逐层传递 props。

5. 通过 `ref` 获取父组件实例

父组件可以通过 ref 获取子组件的实例，子组件也可以通过 ref 获取父组件的实例（需要父组件暴露自身引用）。

示例：

// 父组件
<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod(); // 调用子组件的方法
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod(); // 调用父组件的方法
    },
  },
};
</script>

注意：