在刀片组件中定义 vue 应用答案

【问题标题】：define vue application in blade component在刀片组件中定义 vue 应用
【发布时间】：2019-05-22 01:22:03
【问题描述】：

我在多个刀片页面中重用了导航组件，并进行了一些修改。所以我用了：

<script>
    window.app = new Vue({
        el: '#navigation',
        ....
    });
</script>

在我的导航组件中。

当我将它包含在配置文件组件中时：

<script>
    window.app = new Vue({
        el: '#app',
        ....
    });
</script>

其中一个不起作用。我知道这两个定义有吻合，但不知道怎么解决。

简单来说这是怎么回事：

<script>
    window.app = new Vue({
        el: '#app1',
        ....
    });
</script>

<script>
    window.app = new Vue({
        el: '#app2',
        ....
    });
</script>

【问题讨论】：

你不能有两个 Vue 应用程序绑定到同一个元素，你不能有两个 Vue 应用程序都作为window.app。
真的吗？没办法？？？
当然不是。 window.app = 1; window.app = 2;window.app 等于什么？
我也使用了 const app1 和 const app1，但是没有任何变化，是不是形式不同？

标签： laravel vue.js vuejs2 laravel-blade

【解决方案1】：

您可以通过 HTML 容器使用一个 Vue 应用声明。您不能在另一个声明的组件中使用一个声明的组件。

所以你可以这样做。

<!DOCTYPE HTML>
<html lang="en">
    <head>
      .....
    </head>
    <body>
        <!-- MAYBE YOU CAN DO A BLADE TEMPLATE -->
        <div id="navitagion"></div>  
        <div id="app"></div>  
        <!--=============== scripts  ===============-->
        <script type="text/javascript" src="{{asset('path/to/vue.js')}}"></script>
        const app = new Vue({
           el: '#app',
        });
        const navigation = new Vue({
           el: '#navigation',
        });
    </body>
</html>

您可以在任何容器中添加引用以在 Vue 声明之外使用，如 javascript 或其他 Vue 组件

但是试着让我知道它是如何工作的:)

【讨论】：

【解决方案2】：

你只能在一个 HTML 标签中加载一个 vue.js 库

<!DOCTYPE HTML>
<html lang="en">
<head>
  .....
</head>
<body>
    <div id="app">            
    </div>  
    <!--=============== scripts  ===============-->
    <script type="text/javascript" src="{{asset('path/to/vue.js')}}"></script>
    const app = new Vue({
    el: '#app',
    });
</body>
</html>

【讨论】：

这不是真的。一个页面上可以有多个 Vue 实例。不过，它们确实必须绑定到不同的元素。见codingexplained.com/coding/front-end/vue-js/…
@ceejayoz 更新了这个问题，猜猜可以节省一天，你能撤消你对我的回答所做的吗？ :-) 英语拯救了这一天。