在刀片组件中定义 vue 应用
Posted
技术标签:
【中文标题】在刀片组件中定义 vue 应用【英文标题】：define vue application in blade component 【发布时间】：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，但是没有任何变化，是不是形式不同？
【参考方案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 更新了这个问题，猜猜可以节省一天，你能撤消你对我的回答所做的吗？ :-) 英语拯救了这一天。以上是关于在刀片组件中定义 vue 应用的主要内容，如果未能解决你的问题，请参考以下文章
为啥 vue js 组件没有显示在 laravel 刀片中？