标签导航：
调用 js 组件的方法有四种：1. 内联函数；2. 外部 js 文件；3. jsx 嵌入；4. ref 属性。

组件如何调用js

组件如何调用 JS

组件通常需要与 JavaScript 脚本进行交互，以便实现所需功能。调用 JavaScript 函数的常用方法如下：

1. 内联函数

使用内联 JavaScript 代码直接在组件模板中调用 JavaScript 函数：

<template>
  <button @click="sayHello()">Say Hello</button>
</template>
<script>
export default {
  methods: {
    sayHello() {
      console.log("Hello World!");
    }
  }
}
</script>

2. 外部 JS 文件

将 JavaScript 函数定义在外部 JavaScript 文件中，然后在组件中引入：

<template>
  <button @click="sayHello()">Say Hello</button>
</template>
<script>
import { sayHello } from "./hello.js";
export default {
  methods: {
    sayHello() {
      sayHello();
    }
  }
}
</script>

3. JSX 嵌入

在 JSX 模板中直接嵌入 JavaScript 表达式：

<template>
  <button @click={() => console.log("Hello World!")}>Say Hello</button>
</template>

4. ref 属性

使用 ref 属性来访问组件实例，以调用其方法：

<template>
  <button @click="myButton.sayHello()">Say Hello</button>
</template>
<script>
export default {
  methods: {
    sayHello() {
      console.log("Hello World!");
    }
  },
  mounted() {
    this.myButton = this.$refs.myButton;
  }
}
</script>