vue calls methods in external js

Vue is a very popular JavaScript framework that is widely used in the development of web applications. The Vue framework provides many convenient functions that make the process of developing web applications very simple. However, in the process of developing applications using the Vue framework, we sometimes need to call methods in external JS files. This article will explore how to call methods in external JS files in a Vue application.

To call methods in external JS files in Vue applications, we need to perform the following steps:

Step 1: Introduce external JS files into Vue applications

In Vue In the application, we can use script tags to introduce external JS files. To introduce external JS files, we can add script tags in the template tag of the Vue file. For example, we can introduce an external JS file named hello.js like this:

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

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

Step 2: Define Vue Component

In a Vue application, we need to define a Vue component to be able to Called in the template. We can define Vue components in Vue files. For example, the following code defines a Vue component named HelloWorld:

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

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

Step 3: Call methods in external JS files

Once we have introduced the external JS file into the Vue application and After defining the Vue component, we can call methods in external JS files inside the Vue component. In order to call methods in external JS files, we need to use the created hook function of the Vue instance. First, we need to name the Vue component using the ref attribute. For example, we can name the HelloWorld component hello-world. Then, we can use the $refs attribute in the created hook function to access the Vue component.

<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>

There are several key points to note in the code snippet here:

• First, we name the HelloWorld component with the ref attribute and use that name to reference the component in the Vue instance .
• Then, in the created hook function, we access the HelloWorld component by using the $refs attribute. The $refs property is an object that contains references to Vue components.
• Finally, we called the setGreeting method, passing the string "Hello, Vue!" as a parameter. We have defined setGreeting method in hello.js file, so this line of code will call setGreeting method in hello.js file and pass parameters to it.

Here is the content of the hello.js file:

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

module.exports = {
  setGreeting,
};

In the hello.js file, we define a method called setGreeting and export it for other JavaScript file usage. The function of this method is to set the text content of the greeting element with the string passed to it.

Through this article, we learned how to call methods in external JS files in Vue applications. We learned how to import external JS files and define Vue components, and demonstrated how to use the $refs attribute within the Vue component to access methods in the external JS file. These tips can help you use the Vue framework more easily and bring more flexibility to your web application development.

The above is the detailed content of vue calls methods in external js. For more information, please follow other related articles on the PHP Chinese website!