调用 JS 组件的方法有四种：1. 内联函数；2. 外部 JS 文件；3. JSX 嵌入；4. ref 属性。
组件如何调用 JS
组件通常需要与 JavaScript 脚本进行交互，以便实现所需功能。调用 JavaScript 函数的常用方法如下：
1. 内联函数
使用内联 JavaScript 代码直接在组件模板中调用 JavaScript 函数：
<code class="html"><template>
<button @click="sayHello()">Say Hello</button>
</template>
<script>
export default {
methods: {
sayHello() {
console.log("Hello World!");
}
}
}
</script></code>2. 外部 JS 文件
将 JavaScript 函数定义在外部 JavaScript 文件中，然后在组件中引入：
<code class="html"><template>
<button @click="sayHello()">Say Hello</button>
</template>
<script>
import { sayHello } from "./hello.js";
export default {
methods: {
sayHello() {
sayHello();
}
}
}
</script></code>3. JSX 嵌入
在 JSX 模板中直接嵌入 JavaScript 表达式：
<code class="html"><template>
<button @click={() => console.log("Hello World!")}>Say Hello</button>
</template></code>4. ref 属性
使用 ref 属性来访问组件实例，以调用其方法：
<code class="html"><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></code> 
