vue中父组件直接调用子组件方法（通过ref）

阅读本书更多章节>>>>

目录

1、vue2 中，父组件调用子组件的方法

2、vue3 中，父组件调用子组件的方法

---

1、vue2 中，父组件调用子组件的方法

在Vue 2中，父组件可以通过使用ref属性来引用子组件的实例，然后通过该实例调用子组件的方法。

首先，在父组件的模板中，给子组件添加一个ref属性：

<template>  <div>    <child-component ref="childRef"></child-component>  </div></template>

然后，在父组件的JavaScript代码中，可以通过this.$refs访问到子组件的实例，从而调用子组件的方法：

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

请注意，childMethod()是子组件中定义的一个方法，你需要根据实际情况替换成子组件中真正的方法名。此外，需要确保子组件已经被完全渲染和挂载，才能正确地访问到子组件的实例。

2、vue3 中，父组件调用子组件的方法

在 Vue 3 中，父组件可以直接调用子组件的方法，可以通过 ref 和 implements 来实现。

首先，在子组件中，需要将要调用的方法使用 ref 进行声明，并且在 setup 函数中返回该方法。示例代码如下：

<template>  <div>    <!-- 子组件内容 -->  </div></template><script>import { ref } from 'vue';export default {  setup() {    // 声明需要调用的方法    const childMethod = ref(null);    // 返回方法    return {      childMethod,    };  },};</script>

然后，在父组件中，可以使用 refs 访问子组件，并直接调用子组件的方法。示例代码如下：

<template>  <div>    <!-- 父组件内容 -->    <ChildComponent ref="childRef" />    <button @click="callChildMethod">调用子组件方法</button>  </div></template><script>import { ref } from 'vue';export default {  setup() {    // 获取子组件实例    const childRef = ref(null);    // 调用子组件方法    const callChildMethod = () => {      childRef.value.childMethod(); // 调用子组件的方法    };    return {      childRef,      callChildMethod,    };  },};</script>

通过以上方式，父组件就可以直接调用子组件的方法了。请注意，父组件调用子组件方法的前提是子组件已经被渲染到页面上。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-25/162336.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！