在刀片组件中定义 vue 应用程序
[英]define vue application in blade component
问题描述
我在多个刀片页面中重用了导航组件并进行了一些修改。 所以我用：
<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>
2 个解决方案
解决方案1
0 2018-12-21 17:37:56
你只能在一个 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>
解决方案2
0 已采纳 2018-12-22 23:41:07
您可以通过 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 组件
但是试着让我知道它是如何工作的:)
在刀片中定义vue.js组件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.