我是 Vue 的新手，在一些事情上遇到了一些麻烦。首先，我正在关注本教程:eventbus .如果我将所有代码(html、JS 和 CSS)放在一个 html 文件中，它的工作方式与本教程中描述的一样。
但是，我一直在阅读并且遵循 VUE cli 应用程序结构。我用了 vue 初始化 webpack vueapp01 因此，我在 vueapp01 根文件夹中有一个 index.html 文件，在 src 文件夹中，我在 components 文件夹中有一个 app.vue 和两个 vue 文件； the-box.vue 和 the-button.vue；以及 vue 模板 webpack 加载的所有其他文件。
我没有将所有代码放在一个 html 文件中(有效)，而是像这样将代码分开: 索引.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueapp01</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html><template>
<div id="the-example" class="container">
<h1>Building an Event Bus with <a href="https://vuejs.org" target="_blank">Vue.js</a></h1>
<div class="row">
<div class="col-xs-6">
<the-button what="Event #1"></the-button>
<the-button what="Event #2"></the-button>
<the-button what="Event #3"></the-button>
</div>
<div class="col-xs-6">
<the-box name="Receiver #1"></the-box>
</div>
</div>
</div>
</div>
</template>
<script>
import the-button from './components/the-button'
import the-box from './components/the-box'
export default {
name: 'app',
components: {
the-button,the-box
}
}
</script>
<--
<script>
/******************************************
The Central Event Bus Instance
*******************************************/
let EventBus = new Vue();
</script>/******************************************
Example Root Vue Instance
*******************************************/
new Vue({el: "#the-example"});
/******************************************
A sample Vue.js component that emits an event
*******************************************/
let TheButton = Vue.extend({
name: "the-button",
props: ["what"],
template: `
<button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button>
`,
methods: {
makeItHappen: function(){
EventBus.$emit("somethingHappened", this.what)
}
}
});
Vue.component("the-button", TheButton);/******************************************
A sample Vue.js component that received an event
*******************************************/
let TheBox = Vue.extend({
name: "the-box",
props: ["name"],
template: `
<div class="well">
<div class="text-muted">{{name}}</div>
<div>{{respondedText}}</div>
</div>
`,
data: function(){
return {
respondedText: null
}
},
created: function(){
EventBus.$on('somethingHappened', (what)=>{
this.respondedText = 'Event Received: ' + what;
})
console.log("Responder")
}
});
Vue.component("the-box", TheBox);目前，我遇到错误，“未知自定义元素 the-box”，“未知自定义元素 the-button”。我已经尝试切换脚本和模板顺序以先加载模板，但我仍然没有运气。
如有任何帮助，我们将不胜感激。此外，我假设我通过将这些组件分离到单独的文件中来正确地做到这一点，但如果这不正确，我很乐意接受对我学习使用 Vue 的方式的批评。
最佳答案
改变:
import the-button from './components/the-button'
import the-box from './components/the-box'
到
import TheButton from './components/the-button'
import TheBox from './components/the-box'
做
components: {
TheButton,
TheBox,
}
在您不知何故看不到的地方一定存在另一个更大的错误。
关于vue.js - 使用 VUE 的未知自定义元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45966868/