Question

我是Vue的新手，我遇到了一些麻烦。首先，我关注本教程：eventbus。如果我将所有代码（html，JS和CSS）放在一个html文件中，这就像本教程中所描述的那样。

但是，我一直在阅读，我正在关注VUE cli app结构。我用了 vue init webpack vueapp01 所以，我在vueapp01根文件夹中有一个index.html文件，在src文件夹中我有一个app.vue和两个vue文件在components文件夹中; the-box.vue和-butbut.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>

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>  
    </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>

所述-box.vue：

/******************************************
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);

所述-button.vue：

/******************************************
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);

目前，我收到了错误，“未知的自定义元素框”，“未知的自定义元素按钮”。我已经尝试切换脚本和模板命令以先加载模板，但我仍然没有运气。

非常感谢任何帮助。此外，我假设我正确地将这些组件分离出来以分离文件，但如果这不正确，我很乐意接受批评我正在学习使用Vue的方式。

Answer 1

变化：

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,
}

在你不知何故看不到的地方，肯定会有另一个更大的错误。

Answer 2

这是一个完整的示例，假设您使用.execute，文件应该如何在单个文件组件中实现这个小提琴。

<强>的index.html

vue init webpack <project>

<强> main.js

<!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>

<强> App.vue

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

window.EventBus = new Vue()

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

<强>组件/ TheBox.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>

<强>组件/ TheButton.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>

使用VUE的未知自定义元素

2 个答案: