调用 JS 组件的方法有四种：1. 内联函数；2. 外部 js 文件；3. jsx 嵌入；4. ref 属性。
组件如何调用 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>
