使用VUE的未知自定义元素
我是Vue的新手,并且遇到了一些麻烦。首先,我关注了本教程:eventbus。如果我把所有的代码(html,JS和CSS)放在一个html文件中,就像本教程中所描述的那样。使用VUE的未知自定义元素
但是,我一直在阅读并且正在关注VUE cli应用程序结构。我用 vue init webpack vueapp01 因此,我有一个index.html文件在vueapp01根文件夹中,在src文件夹中我有一个app.vue和两个vue文件在components文件夹中; the-box.vue和the-button.vue;以及由vue模板webpack加载的所有其他文件。
而不必在一个HTML文件中的所有代码(工作)的我的代码中分离出来是这样的: 的index.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({
\t name: "the-button",
props: ["what"],
template: `
\t <button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button>
`,
methods: {
\t makeItHappen: function(){
\t EventBus.$emit("somethingHappened", this.what)
}
}
});
Vue.component("the-button", TheButton);
/******************************************
A sample Vue.js component that received an event
*******************************************/
let TheBox = Vue.extend({
\t name: "the-box",
props: ["name"],
template: `
\t <div class="well">
\t <div class="text-muted">{{name}}</div> \t
\t <div>{{respondedText}}</div>
</div>
`,
data: function(){
\t return {
\t respondedText: null
}
},
\t created: function(){
\t EventBus.$on('somethingHappened', (what)=>{
\t this.respondedText = 'Event Received: ' + what;
})
\t console.log("Responder")
}
});
Vue.component("the-box", TheBox);
目前,我发现了错误, “未知的定制元素的盒子”, “未知的定制元素的按钮” 。我试着切换脚本和模板命令,让模板先载入,但我仍然没有运气。
任何帮助将不胜感激。另外,我假设我通过将这些组件分离出来分开文件来正确地做到这一点,但如果这是不正确的,我会很乐意接受对学习使用Vue的方式的批评。
下面是一个完整的例子,说明如何使用vue init webpack <project>
文件在单个文件组件中实现小提琴。
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bus</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
window.EventBus = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
应用。VUE
<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>
<the-box name="Receiver #2"></the-box>
<the-box name="Receiver #3"></the-box>
</div>
</div>
</div>
</template>
<script>
import TheButton from './components/TheButton.vue'
import TheBox from './components/TheBox.vue'
export default {
name: 'app',
components: {
TheButton, TheBox
}
}
</script>
组件/ TheBox.vue
<template>
<div class="well">
<div class="text-muted">{{name}}</div>
<div>{{respondedText}}</div>
</div>
</template>
<script>
export default {
name: "the-box",
props: ["name"],
data: function(){
return {
respondedText: null
}
},
created: function(){
EventBus.$on('somethingHappened', (what)=>{
this.respondedText = 'Event Received: ' + what;
})
console.log("Responder")
}
}
</script>
组件/ TheButton.vue
<template>
<button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button>
</template>
<script>
export default {
name: "the-button",
props: ["what"],
methods: {
makeItHappen: function(){
EventBus.$emit("somethingHappened", this.what)
}
}
}
</script>
这样做!非常感谢您的帮助,我非常感谢! –
变化:
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文件的底部是否有Vue.component(“the-box,TheBox)和Vue.component(”the-button,TheButton)?那些应该在app.vue中? –
我还没有发现任何比这更大的错误。我已经安装了基本的vue init webpack vue003,该应用程序工作得很好,所以我知道VUE运行正常 –
'进口从”的按钮./components/the-button ''是无效的JavaScript。我不确定你是如何得到你所说的。你不能在变量中设置短划线。 – Bert
@Bert我只是改变了他们的代码,不包括破折号,我仍然有弹出相同的错误。 –
导入单个文件组件时,通常必须指定扩展名,以便通过'vue-loader'运行。那么你是否在使用'./ components/the-button.vue''导入TheButton?请注意扩展名。 – Bert