Vue 3 从另一个组件调用方法 - Html

在Vue 3中，要从另一个组件调用方法，需要使用ref引用并通过value属性来访问它，在特定的时机，还需要使用$nextTick等技巧。

基础示例

<template>
  <div>
    <button @click="sayHello">Click me</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const sayHello = () => {
      console.log("Hello!");
    };

    return {
      sayHello,
    };
  },
};
</script>

现在，假设我们需要从另一个组件中调用sayHello方法，可以按以下方式实现：

<template>
  <div>
    <button @click="onClick">Invoke sayHello!</button>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    const componentRef = ref(null);
    
    const onClick = () => {
      componentRef.value.sayHello();
    };

    onMounted(() => {
      // 此处等待 DOM 更新后引用
      componentRef.value = this.$refs.componentName;
    });

    return { 
      onClick,
      componentRef 
    };
  },
};
</script>

在这个示例中，我们首先创建了一个ref来引用我们要调用的组件，然后在onClick函数中调用该组件的sayHello方法。我们使用了onMounted钩子来等待DOM更新，并通过$refs属于引用组件。谨记，此处需要容忍第一次引用时，该组件的DOM更新可能尚未完成。

现在我们已经掌握了如何从另一个组件中调用方法。当然，这只是示例，具体实现和调用方式仍然要根据具体情况进行判断和调整。

注意事项

1. 在使用ref的时候，需要记得通过.value属性来访问它所引用的对象。
2. 在钩子函数中，使用$refs前要确认它是否已经被赋值，否则可能引起null值的异常。
3. 当我们调用那个方法时，被调用方可以处理任何通过参数传递的内容。这可以通过使用属性属性传递数据来完成。

结论

Vue 3使从另一个组件调用方法变得更加简单明了，只需使用ref和$nextTick等技巧，可以轻松地在不同组件间交互数据和功能。在实践中，确保使用最佳实践，以确保代码的可读性和健壮性。