Как использовать плагины и компоненты Vue.js в Laravel - PullRequest
Новая
       9

Как использовать плагины и компоненты Vue.js в Laravel

0 голосов
/ 26 апреля 2018

Я использую Vue.js (в рамках Laravel), и я новичок в обоих. Я пытаюсь понять некоторые основные идеи о коде, который я пытаюсь использовать:

App.js: 

import Vue from 'vue';
import Toasted from 'vue-toasted';
Vue.component('toast-alert', require('./components/ToastAlert.vue'));
Vue.use(Toasted);

ToastAlert.vue: 

<template>

</template>

<script>
export default {

    props: {

    },
    mounted() {
        this.showToast()
    },
    data() {
        return {
            message: 'Status Update',
        }
    },
    methods: {
        showToast() {
            this.$toasted.show(this.message, {
                duration: 3000
            });

        }
    }
}
</script>

Вопросы:

1) Я понимаю, что import говорит сценарию, что мы собираемся добавить определенные модули узлов, но я не совсем понимаю, для чего use(). Я прочитал документацию, чтобы увидеть, что вы делаете с плагинами (https://vuejs.org/v2/guide/plugins.html),, но на самом деле не понимаете больше.

2) Опять же из документации я вижу, что при регистрации компонента Vue вторым параметром является список параметров, т. Е. Шаблон, реквизиты, методы и т. Д. Я немного запутался в том, что делает require, и как он преобразует файл vue (который состоит из тегов и тега, экспортирующего объект) в конечный объект, который соответствует стандартам Vue.component.

1 Ответ

0 голосов
/ 27 апреля 2018

1) В Vue вызов Vue.use (Plugin, Options) делает плагин доступным во всем приложении. Это в основном способ начальной загрузки плагина, то есть Vue-Toasted, так что вы можете использовать его во всем приложении. Вы также можете определить параметры конфигурации здесь.

2) Vue.component используется для регистрации (ваших) компонентов в приложении. Это позволяет использовать их в каждом другом компоненте, не определяя их в каждом файле. Думайте о файле app.js как о файле начальной загрузки, он определяет все плагины, компоненты и т. Д. И регистрирует их для использования в Vue. require импортирует файл, а Vue анализирует шаблон и объект. Обратите внимание, что все это скомпилировано в веб-пакете и не может быть загружено в браузере как есть.

...