vue如何从组件外部调用方法-mile米乐体育

vue如何从组件外部调用方法

小编给大家分享一下vue如何从组件外部调用方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

从组件外部调用方法

你可以通过给它一个从组件外部调用方法ref：

//parent.vue中的某个地方this.$refs.child.method();

通常，我们使用道具和事件在组件之间进行通信。道具被发送到子组件，事件被发送回父组件。

但有时你可能会遇到需要父组件触发子组件中的方法的情况。这是只有向下传递道具不起作用的地方。

可以向下传递一个布尔值并让子组件监视它：

//child.vueexportdefault{props:['trigger'],watch:{shouldcallmethod(newval){if(newval){//当触发器设置为`true`时调用该方法this.method();}}}}

这工作正常，但仅限于第一次调用。如果你需要多次触发此操作，则必须清理并重置状态。然后逻辑看起来像这样：

• parent组件传递true给triggerprop

• watch被触发，child组件调用方法

• child组件发出一个事件告诉parent组件该方法已成功触发

• parent组件重置trigger回false，因此我们可以再次执行此操作
  

相反，如果我们在子组件上设置ref ，我们可以直接调用该方法：

//parent.vue中的某个地方this.$refs.child.method();

我们打破了“props down, events up”规则，打破了封装，但它更清晰、更容易理解值得这样做！

以上是“vue如何从组件外部调用方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！