Question

我正在使用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标准的最终对象。

Answer 1

1）在Vue中，调用Vue.use（插件，选项）使插件在整个应用程序中可用。它基本上是一种引导插件的方式，即Vue-Toasted，因此您可以在整个应用程序中使用它。您也可以在此处定义配置选项。

2）Vue.component用于在应用程序中注册（您自己的）组件。它允许它们在每个其他组件中使用，而无需在每个文件中定义它们。将app.js文件视为引导程序文件，它定义了所有插件，组件等，并将它们注册为在Vue中使用。 require是导入文件，Vue正在解析模板和对象。请注意，这都是在webpack中编译的，无法按原样加载到浏览器中。

如何在Laravel中使用Vue.js插件和组件

1 个答案: