Laravel и VueJS - где \ как разместить экземпляр и компоненты - PullRequest
Новая
       4

Laravel и VueJS - где \ как разместить экземпляр и компоненты

0 голосов
/ 29 октября 2018

У меня есть простое, возможно, глупое сомнение относительно этой простой вещи, использующей Vue , а не для SPA:

Учитывая, что Vue в моем проекте используется для интерактивного создания небольших фрагментов (таблиц, списков) и общей фильтрации записей базы данных, я должен создать экземпляр Vue для каждого компонента и добавить <div id="app"> в тех местах, где это необходимо. 

...
<body>
....
<div id="nav">...
....
<div id="app">
 <component></component>
</div>

app.js 

const table = new Vue...
const calendar = new Vue...

Или я должен сделать общий #app div сразу после тега body, содержащий весь сайт и внутри него, вставив отдельные компоненты, чтобы затем управлять всем в одном экземпляре new Vue? 

<body>
<div id="app">
 <div id="nav>....
 </div>
 <div id="anotherDiv">
 ...
 ...
 </div> <!-- #app div -->
 </body>

app.js 

const app = new Vue...

Ответы [ 3 ]

0 голосов
/ 29 октября 2018

Здесь нужно учесть много вещей, и все ответы будут несколько субъективными, так что имейте это в виду. Я не думаю, что какой-то один способ является «правильным». Я обнаружил, что самая простая реализация состоит в том, чтобы иметь единственный экземпляр Vue в app.js, а затем создавать свои компоненты и использовать их в любом месте приложения app. Однако это может быть излишним и может негативно повлиять на вас несколькими способами.

В качестве одного примера, если вы не на 100% привержены использованию Vue, то, скорее всего, вы также захотите использовать jQuery и, возможно, даже некоторые плагины jQuery где-то еще в вашем приложении. jQuery и Vue не очень хорошо играют вместе, если вы не создаете экземпляр jQuery внутри компонентов Vue. По этой причине, если вы планируете использовать другие библиотеки javascript, такие как jQuery, вы можете рассмотреть возможность использования отдельных экземпляров Vue с меньшими областями действия везде, где вам нужно использовать компонент.

Если, однако, вы используете Vue, чтобы помочь с некоторыми глобальными задачами, такими как зажим строки или усечение, тогда вам действительно лучше иметь глобальную установку.

Что касается других соображений, таких как накладные расходы, я полагаю, что любой из этих методов, вероятно, будет примерно четным. Когда вы загружаетесь глобально, вы получаете преимущество кэширования в браузере, даже если скрипт находится на каждой странице. Когда вы загружаете страницу за страницей, вы получаете то преимущество, что вам не нужно загружать сценарии повсюду, а использовать их только по мере необходимости. В любом случае, издержки Vue в современном Интернете довольно минимальны, поэтому я не думаю, что это вообще должно повлиять на ваше решение. Это мои мысли.

0 голосов
/ 29 октября 2018

Вы можете сделать так:

// Импортируемые компоненты

импортировать пример компонента из ./components/ExampleComponent.vue';

импортировать adduser из './components/AddUser.vue';

и для компонентов вызова vue в виде laravel: 

<div id="app">
   <examplecomponent ></examplecomponent>
</div>

<script src="{{asset('js/app.js')}}"></script>

Для получения дополнительной базовой информации: Laravel и VueJS - где \ как разместить экземпляр и компоненты

0 голосов
/ 29 октября 2018

Вероятно, проще иметь общий #app в вашем корневом div, который будет содержать весь ваш сайт. Затем, если вы хотите добавить больше компонентов, все, что вам нужно сделать, это создать компонент vue и зарегистрировать его. Чтобы зарегистрировать новый компонент в вашем экземпляре Vue, вы можете использовать следующий код для создания файла main.js. 

Vue.component('your-component-name', require('PATH TO YOUR COMPONENT'));

После того, как ваш компонент зарегистрирован, вы можете использовать его в любом месте тела #app.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...