kaedah panggilan vue dalam js luaran

Vue ialah rangka kerja JavaScript yang sangat popular yang digunakan secara meluas dalam pembangunan aplikasi web. Rangka kerja Vue menyediakan banyak fungsi mudah yang menjadikan proses membangunkan aplikasi web sangat mudah. Walau bagaimanapun, dalam proses membangunkan aplikasi menggunakan rangka kerja Vue, kadangkala kita perlu memanggil kaedah dalam fail JS luaran. Artikel ini akan meneroka cara memanggil kaedah dalam fail JS luaran dalam aplikasi Vue.

Untuk memanggil kaedah dalam fail JS luaran dalam aplikasi Vue, kita perlu melakukan langkah berikut:

Langkah 1: Memperkenalkan fail JS luaran ke dalam aplikasi Vue

Dalam Vue In aplikasi, kita boleh menggunakan tag skrip untuk memperkenalkan fail JS luaran. Untuk memperkenalkan fail JS luaran, kami boleh menambah teg skrip dalam teg templat fail Vue. Sebagai contoh, kita boleh memperkenalkan fail JS luaran bernama hello.js seperti ini:

<template>
  <div>
    <h1>调用外部JS文件中的方法</h1>
  </div>
</template>

<script src="./hello.js"></script>

Langkah 2: Tentukan Komponen Vue

Dalam aplikasi Vue, kita perlu menentukan komponen Vue untuk dapat untuk Dipanggil dalam templat. Kami boleh menentukan komponen Vue dalam fail Vue. Sebagai contoh, kod berikut mentakrifkan komponen Vue yang dipanggil HelloWorld:

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      greeting: "Hello, World!",
    };
  },
};
</script>

Langkah 3: Kaedah panggilan dalam fail JS luaran

Sebaik sahaja kami telah memperkenalkan fail JS luaran ke dalam aplikasi Vue dan Selepas menentukan komponen Vue, kita boleh memanggil kaedah dalam fail JS luaran di dalam komponen Vue. Untuk memanggil kaedah dalam fail JS luaran, kita perlu menggunakan fungsi cangkuk yang dicipta bagi contoh Vue. Pertama, kita perlu menamakan komponen Vue menggunakan atribut ref. Sebagai contoh, kita boleh menamakan komponen HelloWorld hello-world. Kemudian, kita boleh menggunakan atribut $refs dalam fungsi cangkuk yang dicipta untuk mengakses komponen Vue.

<template>
  <div>
    <hello-world ref="hello"></hello-world>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    this.$nextTick(() => {
      this.$refs.hello.setGreeting("Hello, Vue!");
    });
  },
};
</script>

Terdapat beberapa perkara penting yang perlu diperhatikan dalam coretan kod di sini:

• Pertama, kami menamakan komponen HelloWorld dengan atribut ref dan merujuk komponen menggunakan nama itu dalam Contoh Vue .
• Kemudian, dalam fungsi cangkuk yang dicipta, kami mengakses komponen HelloWorld dengan menggunakan atribut $refs. Sifat $refs ialah objek yang mengandungi rujukan kepada komponen Vue.
• Akhir sekali, kami memanggil kaedah setGreeting, menghantarnya rentetan "Hello, Vue!" Kami telah menentukan kaedah setGreeting dalam fail hello.js, jadi baris kod ini akan memanggil kaedah setGreeting dalam fail hello.js dan menghantar parameter kepadanya.

Berikut ialah kandungan fail hello.js:

function setGreeting(greeting) {
  document.getElementById("greeting").innerText = greeting;
}

module.exports = {
  setGreeting,
};

Dalam fail hello.js kami mentakrifkan kaedah yang dipanggil setGreeting dan mengeksportnya untuk kegunaan fail JavaScript yang lain. Fungsi kaedah ini adalah untuk menetapkan kandungan teks unsur ucapan dengan rentetan yang dihantar kepadanya.

Melalui artikel ini, kami mempelajari cara memanggil kaedah dalam fail JS luaran dalam aplikasi Vue. Kami mempelajari cara mengimport fail JS luaran dan mentakrifkan komponen Vue, dan menunjukkan cara menggunakan atribut $refs dalam komponen Vue untuk mengakses kaedah dalam fail JS luaran. Petua ini boleh membantu anda menggunakan rangka kerja Vue dengan lebih mudah dan membawa lebih fleksibiliti kepada pembangunan aplikasi web anda.

Atas ialah kandungan terperinci kaedah panggilan vue dalam js luaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!