laravel 中多个 VUEjs 实例

Posted 2023-02-23

【中文标题】laravel 中多个 VUEjs 实例

【英文标题】：Multiple instances of VUEjs in laravel

【发布时间】：2021-02-10 16:44:38

【问题描述】：

早上好！如何在 Laravel 中处理多个 VUEjs 实例？

我想在项目的某些部分使用组件，而在其他情况下，我想直接在视图中实例化 VUE 并在那里执行逻辑，但我遇到的问题是我不能同时使用两者时间。

如果我想使用组件，我必须离开 app.js 文件的 "const app new Vue"。但是，如果我像这样离开这个文件，它将无法在视图中工作。 我该怎么做？谢谢！

app.js

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
import VueSweetalert2 from 'vue-sweetalert2';


require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.use(VueSweetalert2);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('eliminar-registro', require('./components/EliminarRegistro.vue').default);
Vue.component('modal-encuestas', require('./components/ModalEncuestas.vue').default);
Vue.component('abrir-modal', require('./components/AbrirModal.vue').default);
Vue.component('ejemplo-prueba', require('./components/EjemploPrueba.vue').default);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue(
    el: '#app',
);

【参考方案1】：

注意你的 vue 实例是如何挂载到元素上的

const app = new Vue(
    el: '#app',
);

这可以在您的 app.blade.php 或您使用的任何布局中找到

会有一个<div id="app"></div>

这就是你挂载实例的方式。

所以现在如果你想要第二个实例

只要两个 div 是分开的，你就可以将第二个挂载到另一个 div 上

在 app.js 中

const app = new Vue(
  el: '#app',
);

const app = new Vue(
  el: '#second-app',
);

然后在你的app.blade.php

<div id="app"></div>
<div id="second-app"></div>

这将在同一页面上为您提供两个单独的 vue 实例。