logo标签列表

VueJS组件

javascriptlaravelvue.jsvuejs2
14
我想利用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加载仍然有效？

3个回答
7
7

已经有人提到了GuillaumeLeclerc/vue-google-maps，它可以在npm上作为vue-google-maps使用，但请注意，该版本仅适用于vue 1.x。

如果您正在使用v2，请查看这个伟大的vue2分支xkjyeah/vue-google-maps——它可以在npm上作为vue2-google-maps使用。

API很简单，与v1版本相差不远，而且存储库比其上游版本活跃得多。

这确实使我的vue地图工作比我最初做的更加轻松。

希望这可以帮助到您。

1
如果我理解得正确，您有一个Google Maps脚本，加载时调用window.app.init，对吗？
您的Vue组件是否有一个init()方法（上面没有显示）？如果有一个，它需要在app.methods.init()中记住VueJS的标准可调用方法位于methods键下。
另外：您没有提到您的app.init是否是Vue组件的一部分。如果不是，似乎您的app.init函数被覆盖了，因为您正在重新定义window.app作为您的Vue组件。
最后，如果您的init是Vue的一部分，那么您的Google Maps fn回调是否在加载Vue之前调用了此init()，因此不存在这样的方法（但是）？
是的。我正在导入Google Maps脚本，并通过脚本中的window.app.init调用告诉它在页面加载时加载init方法。我已经添加了init()方法，这个方法不小心没有显示出来，但实际上存在，并且可以完美地加载与地图相关的所有内容。所有的方法都在方法键中实时运行和工作。现在的目标是重构代码，由于“主”页面包含地图视图，我想创建一个组件，只包含此页面所需的所有内容。另一个页面将有不同的内容，我想在那里使用不同的方法。 - sesc360
app.init 不是组件的一部分。目前它们只是看起来像描述的那样。实际上，window.app = new Vue 表达式让我头疼，因为我不知道如何正确使用组件，以便在加载 Google 地图脚本时找到正确的 init 方法。 - sesc360
我会这样构建它：将Google地图设置为独立的JS服务，由Vue本身调用，可能在其created()生命周期回调中。这样可以更好地控制协调。如果不这样做，否则您必须协调所有时间，以便在从地图到vue的回调之前可用Vue组件。建议在Vue的created()和ready()生命周期回调中记录控制台注释，并在google maps中执行相同操作，以查看地图是否准备就绪，然后再加载Vue。 - Tremendus Apps
另一个想法是：如果您要为不同的Vue组件共享Google Maps功能，则可以考虑将Google Maps代码打包为mixin - 这是可以在Vue实例之间共享的功能，但仅在mixin本身中声明。https://vuejs.org/guide/mixins.html - Tremendus Apps
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接