首页 文章

VueJS组件

提问于
浏览 次
13

我想利用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... 部分 . 我使用谷歌 Map ，因此当页面加载时，它搜索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 组件作为主要谷歌 Map 视图 . 点击我主题中的相应链接时，我加载了不同页面的其他组件 . 最后，我不希望在一个脚本中包含所有VueJS代码 . 因此模型 .

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

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

如何以某种方式修改我的组件，app.init加载仍然有效？

javascript laravel vue.js vuejs2

3 回答

  • 7

    如果我理解你的话，你有一个Google Maps脚本，加载后会调用window.app.init，对吧？

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

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

    最后，如果你的init是Vue的一部分，你的谷歌 Map fn回调在加载Vue之前调用这个init（），因此还没有这样的方法吗？

    回复于
  • 1

    有人已经提到GuillaumeLeclerc/vue-google-maps在npm上可用作 vue-google-maps ，但要注意该版本仅适用于vue 1.x

    如果您正在使用v2，请查看这个伟大的vue2 fork xkjyeah/vue-google-maps - 它在npm上以 vue2-google-maps 的形式提供 .

    API非常简单，并且与v1版本相差甚远，而且存储库比其上层版本更加活跃 .

    这真的让我的vue map比滚动我自己更轻松，这就是我最初做的事情 .

    我希望有所帮助

    回复于
  • 7

    也许您应该使用或至少研究代码来执行该操作 .

    例如，您可以在Github上检查 vue-google-maps ：https://github.com/GuillaumeLeclerc/vue-google-maps/

    它定义了许多与Google Map 相关的组件 .

    回复于

相关问题