VueJS 组件

Posted

技术标签:

【中文标题】VueJS 组件【英文标题】:VueJS components 【发布时间】:2016-09-05 15:39:19 【问题描述】:

我想利用 来清理我的脚本。因此,对于要加载到 Laravel 的每个页面,我都有一个组件。到目前为止一切正常。但是我在将当前的脚本逻辑转移到组件时遇到了问题。

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

ma​​in.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 加载仍然有效?

【问题讨论】:

【参考方案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 地图工作起来比滚动我自己的地图要轻松得多,这就是我最初所做的。

希望对你有帮助

【讨论】:

【参考方案2】:

也许您应该使用或至少研究执行此操作的包的代码。

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

它定义了很多与谷歌地图相关的组件。

【讨论】:

【参考方案3】:

如果我没听错的话,你有一个谷歌地图脚本,加载时会调用 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() 方法,该方法不是偶然显示的,而是存在的,并且可以很好地加载与地图相关的所有内容。所有方法都在方法键中有效和工作。现在的目标是重构代码,并且由于加载的“主”页面包含地图视图,我想创建只包含该页面所需的所有内容的组件。另一个页面会有不同的内容,我想在那里使用不同的方法。 app.init 不是组件的一部分。这些看起来就像现在描述的那样。其实window.app = new Vue这个表达式让我很头疼如何正确使用组件,所以当谷歌地图脚本被加载时,它会找到正确的init方法。 所以我的结构是将谷歌地图设置为独立的 JS 服务,由 Vue 本身调用,可能在其 created() 生命周期回调中。通过这种方式,您可以更好地控制协调。您不必这样做,但否则您必须协调所有事情的时间,以便在从映射到 vue 的回调之前 Vue 组件可用。建议在 Vue 的 created() 和 ready() 生命周期回调中将注释记录到控制台,并在谷歌地图中执行相同操作,以查看您的地图是否在您的 vue 之前准备好。 还有另一个:如果您正在为不同的 vue 组件共享谷歌地图功能,您可能会考虑将谷歌地图代码打包为一个 mixin - 可以在 vue 实例之间共享但只声明一次的功能(在 mixin 本身中)vuejs.org/guide/mixins.html

以上是关于VueJS 组件的主要内容,如果未能解决你的问题,请参考以下文章

从 VueJS 的父组件中引用子组件的索引

如何从组件外部销毁 vuejs 组件

如何从另一个组件加载 vuejs 动态组件

Vuejs组件

如何从另一个组件调用 VueJS 组件

如何在 VueJS 中的组件之间共享数据