父组件Vue中如何调用子组件的方法

Posted 2023-02-22

【中文标题】父组件Vue中如何调用子组件的方法

【英文标题】：How to call to sub component’s method in parent component Vue

【发布时间】：2021-09-24 22:31:06

【问题描述】：

我想在 vue 中从父组件运行子组件的方法来刷新该组件的某些区域。这是我想要的示例。

Home.vue

<template>
   <componentp></componentp>
</template>

<script>
.....
methods:
  parentMethod()
    //I want to call to methodx in componentp
  

...
</script>

componentp.vue

<template>
..............
</template>

<script>
....
methods:
 methodx()
   //Run me from parent
 


...
</script>

我想在子组件中调用methodx怎么办？

【问题讨论】：

将更新过程移至父级，并将数据传递给子级。

检查this anwer。

【参考方案1】：

如果您不能按照@Chris G 所说的做，另一种选择可能是使用观察者：

https://vuejs.org/v2/guide/computed.html#Watchers

创建一些“控制”变量并观察它是否会更改以使您的流程发生变化。

【参考方案2】：

您可以在更改父参数后从组件中查看参数的父级并在组件中运行函数。 看到这个链接。 i need run function in component from page with data page

【参考方案3】：

<template>
   <componentp ref="componentp"></componentp>
</template>

<script>
.....
methods:
  parentMethod()
    //I want to call to methodx in componentp
    this.$refs.componentp.methodx()
  

...
</script>