VueJS 组件注册
Posted
技术标签:
【中文标题】VueJS 组件注册【英文标题】：VueJS Component Registration 【发布时间】：2017-06-24 09:15:51 【问题描述】：我创建了一个全局组件，我想在我的代码中快速测试它。但是 VueJS 抱怨组件没有注册。我想当我创建像下面这样的组件时，这应该已经工作了吗？
我使用 BULMA CSS 框架进行测试，并复制并粘贴了我想测试的组件。所以在 html 代码中我将使用：
<div id="app">
<message title="Hello world" body="test"></message>
</div>
我得到的错误是：
未知的自定义元素： - 您是否注册了组件 正确吗？对于递归组件，请确保提供“名称” 选项。
Vue.component('message',
props: ['title', 'body'],
template: `
<article class="message">
<div class="message-header">
<p>title</p>
<button class="delete"></button>
</div>
<div class="message-body">
body
</div>
</article>`
);
var app = new Vue(
el: '#app',
data:
responders: [],
incidents: []
,
mounted: function ()
this.getIncidents();
,
methods: (...)
https://jsfiddle.net/2re6qv6h/#&togetherjs=BnB0KhQdLU
更新
代码嵌入在我的 laravel 代码中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEDIFAKTOR - @yield('title') </title>
<link rel="stylesheet" href="css/vendor.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.js"></script>
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
@include('layouts.navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Page wrapper -->
@include('layouts.topnavbar')
<!-- Main view -->
<div id="app">
<my-message title="Hello world" body="test"></my-message>
</div>
<!-- Footer -->
@include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
@section('scripts')
@show
</body>
<script src="js/app.js" type="text/javascript"></script>
</html>
完整的 VueJS 代码
Vue.component('my-message',
props: ['title', 'body'],
data()
return
isVisible: true
;
,
template: `
<article class="my-message" v-show="true">
<div class="message-header">
<p>title</p>
<button type="button" @click="hideModal">x</button>
</div>
<div class="message-body">
body
</div>
</article>`,
methods:
hideModal()
this.isVisible = false;
);
var app = new Vue(
el: '#app',
data:
responders: [],
incidents: []
,
mounted: function ()
this.getIncidents();
,
methods:
getIncidents: function()
console.log('getIncidents');
var self = this;
this.$http.get('/api/v1/incidents').then(function(response)
// set data on vm
console.log(response.data);
var incidentsReceived = response.data.data.map(function (incident)
return incident;
);
Vue.set(self, 'incidents', incidentsReceived);
);
);
【问题讨论】：
article 是什么，这是怎么定义的，可以创建一个 fiddle 复制它吗？
更新了我的问题。它只是 BULMA CSS 框架中用于测试的一个组件
我只是想知道为什么组件即使是同一个JS文件中定义的全局组件也无法识别
可以创建一个小提琴来复制它吗？
添加了一个小提琴。奇怪的是，它显示在小提琴中，但不在我的代码中
【参考方案1】：
尝试将文章的类名 <article class="message"> 更改为 <article class="my-message">
【讨论】：
不，仍然是同样的错误。似乎我的全局组件根本无法识别 你能上传app的完整代码并关心脚本缓存吗？我运行你的代码运行良好
重新编译了吗？ npm run dev 用于 laravel 5.4 和 gulp 用于 laravel 5.3
是的，也这样做了
哦...等等...我检查了源文件..我重新编译了，但是浏览器仍然显示旧的JS脚本文件。它似乎没有在浏览器中更新【参考方案2】：
根据您使用的 Laravel 版本，它已经内置了 Vue，并且直接将其附加到窗口。我的猜测是您的应用程序正在运行，并且 Vue 引用被您未注册组件的 Laravel 实例覆盖。可以肯定的是，删除 html 中的底部脚本标记 <script src="js/app.js" type="text/javascript"></script>。
看起来你注册你的组件就好了。如果有的话，您可以将 is="" 属性添加到您的组件中，以明确告诉它它是哪个组件。如果您将其称为 my-message，这有点多余，但它确实为人们提供了一些明确性，即它是一个 Vue 组件。最终，这将取决于您和您的团队的题外话。
【讨论】：
【参考方案3】：经过数小时的搜索 SO 答案后，我终于发现问题在于 Chrome 没有更新 app.js 文件。在浏览器中进行硬刷新，它应该会消除错误。如果您愿意，请尝试disabling browser cache completely。
【讨论】：
以上是关于VueJS 组件注册的主要内容，如果未能解决你的问题，请参考以下文章