面试题：如何访问 Vue 子组件的实例或子元素？

在 Vue 中，访问子组件的实例或子元素是常见的需求，尤其是在需要直接操作子组件或 DOM 元素时。以下是几种常用的方法：

1. 使用 `ref` 访问子组件实例或子元素

ref 是 Vue 提供的一种直接访问子组件实例或 DOM 元素的方式。

访问子组件实例

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 this.$refs 访问子组件实例
      this.$refs.child.someMethod();
    }
  }
};
</script>

访问子元素

<template>
  <div>
    <input ref="input" type="text" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 通过 this.$refs 访问 DOM 元素
      this.$refs.input.focus();
    }
  }
};
</script>

2. 使用 `$children` 访问子组件实例

$children 是 Vue 实例的一个属性，包含当前组件的所有子组件实例。

示例

<template>
  <div>
    <ChildComponent />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 this.$children 访问子组件实例
      if (this.$children.length > 0) {
        this.$children[0].someMethod();
      }
    }
  }
};
</script>

注意：$children 是一个数组，顺序可能与模板中的子组件顺序不一致，且不推荐在复杂场景中使用。

3. 使用 `$parent` 访问父组件实例

在子组件中，可以通过 $parent 访问父组件实例。

示例

<template>
  <div>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      // 通过 this.$parent 访问父组件实例
      this.$parent.someMethod();
    }
  }
};
</script>

注意：$parent 和 $children 都是非响应式的，且容易导致组件耦合，不推荐在复杂场景中使用。

4. 使用 `provide` 和 `inject` 跨层级访问

provide 和 inject 是 Vue 提供的一种跨层级组件通信的方式，适合在深层嵌套组件中访问父组件或祖先组件的数据或方法。

父组件提供数据或方法

export default {
  provide() {
    return {
      parentMethod: this.someMethod
    };
  },
  methods: {
    someMethod() {
      console.log('父组件方法被调用');
    }
  }
};

子组件注入数据或方法

export default {
  inject: ['parentMethod'],
  methods: {
    callParentMethod() {
      this.parentMethod();
    }
  }
};

5. 使用事件通信

通过自定义事件（$emit）和监听事件（$on）实现父子组件通信。

父组件监听子组件事件

<template>
  <div>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(payload) {
      console.log('子组件触发的事件:', payload);
    }
  }
};
</script>

子组件触发事件

export default {
  methods: {
    someMethod() {
      this.$emit('custom-event', '数据');
    }
  }
};

6. 总结

方法	适用场景	优点	缺点
`ref`	访问子组件实例或 DOM 元素	直接、简单	需要手动管理 `ref`
`$children`	访问子组件实例	无需额外配置	顺序不确定，不推荐在复杂场景中使用
`$parent`	访问父组件实例	简单	导致组件耦合，不推荐在复杂场景中使用
`provide/inject`	跨层级访问数据或方法	适合深层嵌套组件	不适合简单场景
事件通信	父子组件通信	解耦，适合组件通信	需要手动管理事件