VueJS components

VueJS components

本文关键字：components VueJS      更新时间：2023-09-26

我想利用VueJS组件来清理我的脚本。因此，我在Laravel中加载的每个页面都有一个组件。到目前为止一切都很好。但我在将当前脚本逻辑转移到组件时遇到了问题。

这是导入要使用的组件的当前脚本设置：

main.js

import HomeView from './components/HomeView.vue';
import IncidentView from './components/IncidentView.vue';
window.app = new Vue({
   el: '.content',
   components: {
       HomeView, IncidentView
   },
   methods: {
       // Init GIS
      init: function() {
          // Initialize GIS Map
         initGISMap(this.$els.map);
      },
    }
(...)
}

对我来说，关键是window.app = new Vue...部分。我使用谷歌地图，因此当页面加载时，它会搜索app.init方法。这是我在刀片模板中加载的脚本的一部分：

<!DOCTYPE html>
<html>
<body class="hold-transition skin-blue sidebar-mini">
        <section class="content-header">
            <h1>
                @yield('page_title')
                <small>@yield('page_description')</small>
            </h1>
        </section>
        <!-- Main content -->
        <section class="content">
            @if (isset($vueView))
                <component is="{{ $vueView }}">
            @endif
                @yield('content')
            </component>
        </section>
        <!-- /.content -->
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=app.init" async defer></script>
</body>
</html>

各个页面（我在Vue中为每个模块创建一个页面）如下所示：

@extends('app', ['vueView' => 'home-view'])
@section('page_title', 'title')
@section('page_description', 'title')
@section('content')
content
@endsection

通过定义vueView变量，可以使用我在脚本中导入的正确模块。

目标是使用HomeView组件作为主要的谷歌地图视图。以及我在单击主题中的相应链接时加载的不同页面的其他组件。最后，我不想在一个脚本中包含所有VueJS代码。因此，模型。

当我传输当前JS文件的所有内容时，我收到一个错误，抱怨app.init不是一个函数。组件如下所示：

<script>
export default {
   data: {
       // SEARCH
       addressComponents: '',
       autocompletePlace: '',
       autocompleteAddress: '',
(...)
}

如何修改我的组件，使app.init加载仍然有效？

有人已经提到GuillaumeLeclerc/vue谷歌地图，它在npm上以vue-google-maps的形式提供，但请注意，该版本仅适用于vue 1.x

如果你使用的是v2，看看这个很棒的vue2fork-xkjyee/vue-google地图——它在npm上以vue2-google-maps的形式提供。

API简单明了，与v1版本没有太大差异，而且存储库比升级版的存储库更活跃。

它真的让我的vue地图工作比滚动自己的更无痛，这是我最初所做的。

我希望这能帮助

也许你应该使用，或者至少研究一下这样做的包的代码。

例如，您可以在Github上查看vue谷歌地图：https://github.com/GuillaumeLeclerc/vue-google-maps/

它定义了大量与谷歌地图相关的组件。

如果我理解得对，你有一个谷歌地图脚本，加载后会调用window.app.init，对吧？

Vue组件是否有init（）方法（上面没有显示）？如果有，它需要在app.methods.init（）中。记住，对于VueJS，标准的可调用方法位于methods键下。

或者：你没有提到你的app.init是否是Vue组件的一部分。如果不是，那么你的app.init函数似乎被覆盖了，因为你正在将window.app重新定义为你的vue组件。

最后，如果你的init是Vue的一部分，你的谷歌地图fn回调是否在加载Vue之前调用了这个init（），因此还不存在这样的方法？

相关文章：