Laravel10+Vite+Vue3：外部JS调用Vue组件方法的实现方案

针对你的场景，这里提供三种可行的实现方案，从快速解决到符合Vue最佳实践依次排列：

方法1：全局挂载组件实例（快速实现） #

这种方式适合小项目快速验证，直接将Vue组件实例挂载到window对象，让外部脚本能直接访问。

步骤1：修改bs-button组件暴露方法 #

在组件的setup中通过expose对外暴露toggleLoading方法：

setup(props, { emit, expose }) {
    const loading = ref(false);

    const handleClick = () => {
        if (!loading.value && props.autoHandleClick) {
            loading.value = true;
            emit('click');
        }
    };

    const toggleLoading = () => {
        loading.value = !loading.value;
    };

    // 暴露方法给外部访问
    expose({ toggleLoading });
    
    return {
        loading,
        handleClick,
        toggleLoading
    };
},

步骤2：在Vue入口文件挂载组件实例 #

修改resources/js/app.js，将登录按钮的组件实例存到全局：

import { createApp } from 'vue';
import BsButton from './components/BsButton.vue';

const app = createApp({});
app.component('bs-button', BsButton);
const vm = app.mount('#app');

// 等待组件挂载完成后获取ref实例
setTimeout(() => {
    window.loginButton = vm.$refs.loginButton;
}, 0);

步骤3：在login.js中调用方法 #

直接通过全局对象调用组件方法：

import $ from 'jquery';

$(document).ready(function () {
    $('#login-form').on('submit', (e) => {
        e.preventDefault();
        // 调用组件的toggleLoading方法
        window.loginButton?.toggleLoading();
    });
});

方法2：通过自定义DOM事件触发（解耦方案） #

这种方式不用全局挂载，通过DOM自定义事件实现外部脚本与Vue组件的通信，更解耦。

步骤1：给bs-button添加事件监听 #

在组件中添加mounted和beforeUnmount钩子，监听自定义DOM事件：

// 在bs-button组件的script中添加
mounted() {
    const buttonEl = this.$el;
    const toggleHandler = () => this.toggleLoading();
    buttonEl.addEventListener('toggle-loading', toggleHandler);
    // 存下handler方便销毁时移除
    this.toggleHandler = toggleHandler;
},
beforeUnmount() {
    const buttonEl = this.$el;
    buttonEl.removeEventListener('toggle-loading', this.toggleHandler);
}

步骤2：在login.js中触发事件 #

表单提交时触发自定义事件：

import $ from 'jquery';

$(document).ready(function () {
    $('#login-form').on('submit', (e) => {
        e.preventDefault();
        // 获取按钮DOM元素并触发自定义事件
        const loginBtn = document.getElementById('login-btn');
        loginBtn.dispatchEvent(new CustomEvent('toggle-loading'));
    });
});

方法3：整合到Vue组件中（推荐方案） #

既然使用Vue开发，建议将表单逻辑整合到Vue组件内，减少jQuery依赖，更符合Vue的开发模式。

步骤1：创建LoginForm组件 #

将表单和按钮封装到同一个Vue组件中：

<template>
    <form @submit.prevent="handleSubmit">
        <!-- 表单输入字段 -->
        <input type="email" name="email" placeholder="邮箱">
        <input type="password" name="password" placeholder="密码">
        
        <bs-button
            type="button"
            text="Login"
            class="btn btn-primary"
            icon="fa-solid fa-arrow-right-to-bracket"
            :auto-handle-click="false"
            ref="loginButton"
        ></bs-button>
    </form>
</template>

<script setup>
import BsButton from './BsButton.vue';
import { ref } from 'vue';
import axios from 'axios';

const loginButton = ref(null);

const handleSubmit = async () => {
    loginButton.value.toggleLoading();
    try {
        // 执行登录请求
        const response = await axios.post('/login', {
            // 表单数据
        });
        // 登录成功逻辑
    } catch (error) {
        // 登录失败逻辑
        loginButton.value.toggleLoading(); // 恢复按钮状态
    }
};
</script>

步骤2：在login.blade.php中使用组件 #

<div id="app">
    <login-form></login-form>
</div>

这种方式不需要单独的login.js，所有逻辑都在Vue组件内完成，代码更易维护。

内容的提问来源于stack exchange，提问作者DEFALTUSER