Cara memanggil fungsi lain fungsi Vue

Terdapat empat cara untuk memanggil fungsi lain di Vue: terus memanggil fungsi dalam contoh Vue yang sama. Lulus fungsi melalui alat peraga. Memancarkan peristiwa melalui $ emit dan memanggil fungsi komponen induk. Gunakan $ ref untuk terus memanggil fungsi pada contoh komponen lain.

Cara memanggil fungsi lain di Vue

Di Vue, fungsi lain boleh dipanggil untuk melaksanakan pelbagai tugas dalam komponen. Ini dapat dicapai dengan cara berikut:

1. Panggil secara langsung

Jika fungsi ditakrifkan dalam contoh VUE yang sama, anda boleh memanggilnya secara langsung menggunakan sintaks berikut:

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

2. Dengan prop

Jika fungsi ditakrifkan dalam komponen induk, anda boleh menggunakan prop untuk menyampaikannya kepada komponen kanak -kanak:

 <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. Dengan $ emit

Jika fungsi ditakrifkan dalam komponen kanak -kanak, anda boleh menggunakan kaedah $emit untuk memancarkan acara itu kepada komponen induk, dengan itu memanggil fungsi dalam komponen induk:

 <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. Dengan $ refs

Jika anda perlu memanggil fungsi pada contoh komponen lain secara langsung, anda boleh menggunakan objek $refs :

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

Atas ialah kandungan terperinci Cara memanggil fungsi lain fungsi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!