Question

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

<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>

Answer 1

您只能在一个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>

Answer 2

您可以通过HTML容器使用一个Vue应用程序声明。您不能在其他已声明的组件内使用一个已声明的组件。

因此您可以执行此操作。

 sum is 250

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

但是请尝试让我知道它是如何工作的：）

在刀片组件中定义vue应用程序

2 个答案: