VUE関数の他の関数を呼び出す方法

VUEで他の関数を呼び出すには4つの方法があります。同じVUEインスタンス内で関数を直接呼び出します。プロップを通して関数を渡します。 $ EMITを介してイベントをエミットし、親コンポーネント関数を呼び出します。 $ refsを使用して、別のコンポーネントインスタンスで関数を直接呼び出します。

Vueの他の機能を呼び出す方法

VUEでは、コンポーネント内のさまざまなタスクを実行するために、他の機能を呼び出すことができます。これは、次の方法で達成できます。

1。直接電話してください

関数が同じVueインスタンス内で定義されている場合、次の構文を使用して直接呼び出すことができます。

 <code class="javascript">this.myFunction();</code>

2。小道具によって

関数が親コンポーネントで定義されている場合、プロップを使用して子コンポーネントに渡すことができます。

 <code class="javascript">// 父组件<template> <child-component :my-function="myFunction"></child-component> </template> <script> export default { methods: { myFunction() { /* ... */ } } } </script> // 子组件<template> <button>调用父组件函数</button> </template> <script> export default { props: [&#39;myFunction&#39;], methods: { myFunction() { /* ... */ } } } </script></code>

3。$ emit

関数が子コンポーネントで定義されている場合、 $emitメソッドを使用してイベントを親コンポーネントにエミストし、親コンポーネントの関数を呼び出すことができます。

 <code class="javascript">// 子组件<template> <button>调用父组件函数</button> </template> <script> export default { methods: { myFunction() { /* ... */ } } } </script> // 父组件<template> <child-component v-on:my-event="myFunction"></child-component> </template> <script> export default { methods: { myFunction() { /* ... */ } } } </script></code>

4。$ refs

別のコンポーネントインスタンスの関数を直接呼び出す必要がある場合は、 $refsオブジェクトを使用できます。

 <code class="javascript"><template> <child-component ref="child"></child-component> </template> <script> export default { mounted() { this.$refs.child.myFunction(); } } </script></code>

以上がVUE関数の他の関数を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。