반응형
VUE를 사용하는 알 수 없는 사용자 지정 요소
저는 Vue에 처음 와서 몇 가지 일로 어려움을 겪고 있습니다.먼저, 저는 이 튜토리얼을 따르고 있었습니다: eventbus.모든 코드(html, JS 및 CSS)를 하나의 html 파일에 넣으면 이 튜토리얼에서 설명한 대로 작동합니다.
하지만 저는 VUE cli 앱 구조를 읽고 따라하고 있었습니다.vue init webpack vueapp01을 사용했기 때문에 vueapp01 루트 폴더에는 index.html 파일이 있고 src 폴더에는 앱이 있습니다.vue 및 컴포넌트 폴더에 있는 2개의 vue 파일(the-box.vue 및 버튼)을 지정합니다.vue: vue 템플릿 웹 팩에 의해 로드된 다른 모든 파일과 함께.
모든 코드를 하나의 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({
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);현재 "Unknown custom element the-box", "Unknown custom element 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,
}
뭔가 눈에 띄지 않는 훨씬 더 큰 오류가 또 있을 거야
다음 예시는 1개의 파일컴포넌트에서 이 기능을 구현하기 위해 파일이 어떻게 표시되는지 보여 줍니다.vue init webpack <project>.
index.displaces를 표시합니다.
<!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.discloss.main.discloss.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
window.EventBus = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
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>
컴포넌트 / The Box.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>
컴포넌트/더버튼.표시하다
<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>
언급URL : https://stackoverflow.com/questions/45966868/unknown-custom-element-using-vue
반응형
'programing' 카테고리의 다른 글
| C와 임베디드 C의 차이점은 무엇입니까? (0) | 2022.07.04 |
|---|---|
| 2개의 어레이 리스트를 같은 방법으로 랜덤화하는 방법 (0) | 2022.07.04 |
| Vuex를 통한 세분화된 조직 (0) | 2022.07.03 |
| 인라인 어셈블리 언어가 네이티브 C++ 코드보다 느립니까? (0) | 2022.07.03 |
| Null Pointer란예외입니다. 어떻게 수정 방법 (0) | 2022.07.03 |