在刀片组件中定义vue应用程序 [英] define vue application in blade component
问题描述
我做了一些修改，在多个刀片页面中重用了导航组件.所以我用:
I have navigation component reused in multiple blade pages with some modification. so I used:
<script>
window.app = new Vue({
el: '#navigation',
....
});
</script>
在我的导航组件中.
当我将其包含在具有以下内容的配置文件组件中时:
when I included it in profile component that have:
<script>
window.app = new Vue({
el: '#app',
....
});
</script>
其中之一不起作用.我知道这两个定义都有吻合，但我不知道如何解决.
one of them doesn't work. I know that these two definitions have anastomosis but I don't know how resolve it.
简单地说，这是怎么回事:
In simple what the matter with this:
<script>
window.app = new Vue({
el: '#app1',
....
});
</script>
<script>
window.app = new Vue({
el: '#app2',
....
});
</script>
推荐答案
您可以通过HTML容器使用一个Vue应用程序声明.您不能在其他已声明的组件内使用一个已声明的组件.
You can use one Vue app declaration by HTML container. You can't use one declared component inside other declared component.
因此您可以执行此操作.
So you can do this.
<!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>
您可以在任何容器中添加引用以在javascript之类的Vue声明之外使用，也可以在其他Vue组件中使用
You can add references in any container to use outside of Vue declaration like javascript or in other Vue component
但是请尝试让我知道它是如何工作的:)
But try and let me know how it works :)
这篇关于在刀片组件中定义vue应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
