- 首页
- 前端开发
- 在 Vue.js 中嵌套组件时出现未知的自定义元素
在 Vue.js 中嵌套组件时出现未知的自定义元素
[英] Unknown custom element when nesting components in Vue.js
本文介绍了在 Vue.js 中嵌套组件时出现未知的自定义元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
太不可思议了！我已经在 Vue.js 中使用了嵌套组件并且它们有效.现在，我又创建了两个，但它们不起作用.我只是看不出问题.
观察.我将只包括不能嵌套的两个组件.
App.vue
<div id="应用程序"><menu-home-component></menu-home-component>这里组件可以工作，但我希望它在另一个组件中....</模板><脚本>从 './components/MenuHomeComponent' 导入 MenuHomeComponent从'./components/ImoveisDestaqueComponent'导入ImoveisDestaqueComponent从'./components/PainelAnuncios'导入PainelAnuncios变量数据 = {secao : "mensagens"}导出默认{名称:'应用'，成分 : {MenuHomeComponent、ImoveisDestaqueComponent、PainelAnuncios},数据:函数(){返回数据}}
这是包含 MenuHomeComponent 的 HomeComponent.我无法使用 MenuHomeComponent ，出现未知自定义元素"错误.
<div><menu-home-component></menu-home-component>此处未知的自定义元素"错误
</模板><脚本>从 './MenuHomeComponent' 导入 MenuHomeComponent从'./ImoveisDestaqueComponent'导入ImoveisDestaqueComponent导出默认{名称:家"}
MenuHomeComponent 只包含一个占位符文本:
<div>菜单主页.
</模板><脚本>导出默认{}
更新以显示工作场景
这是 PainelAnuncios.vue 组件
<脚本>从 './ListaAnuncios' 导入 ListaAnuncios；从 'vue-fetch-data' 导入 FetchData；从 'axios' 导入 axios；导出默认{名称:painelanuncios",数据:函数(){返回 {anuncios: [], erroConexao : false}},安装 (){axios.get('http://www.example.com/anuncios2').then(response => { this.anuncios = response.data; }).catch( error => { this.erroConexao = true });},方法: {suspenderAnuncio:函数(事件){alert("depois de alterado, ativo" + event.ativo);axios.post('http://www.example.com/painel_de_controle/suspender_anuncio', { imovel_id : event.imovelId, tipo_imovel : 'casa', tipo_anuncio : 'venda', ativo : event.ativo }).then(response=> { this.anuncios = response.data; }).catch( error => { alert("não foi possível atualizar o anúncio!") } );}}}<模板><div><div v-if="erroConexao"><div class="alert alert-danger alert-dismissiblefade show" role="alert"><strong>Erro ao conectar！</strong>赞成，verifique sua conexão com 互联网.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
<lista-anuncios v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncios="anuncios" ></lista-anuncios>
</模板>
这是 ListaAnuncios.vue 组件
<模板><div><div>{{ comunicacao }}</div><div v-for="anuncio in anuncios" ><anuncio v-model="comunicacao" v-on:onTestar="testar" v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncio="anuncio"></anuncio>
</模板><风格></风格>
这是 Anuncio 组件
<脚本>导出默认{name: 'anuncio',数据:函数(){返回 { estaAberto: false, url : 'http://www.example.com' }},方法: {abrirMensagem:函数(){this.estaAberto = !this.estaAberto;},测试(事件){this.$emit("onTestar", '事件');},suspenderAnuncio : 函数(事件){var ativo = parseInt(this.anuncio.Ativo);警报(勇敢做 ativo" + ativo);如果(ativo == 1){ativo = 0;}别的{ativo = 1;}this.anuncio.ativo = ativo;this.$emit('onSuspenderAnuncio', { imovelId : this.anuncio.ImovelId, ativo : ativo });},mudarComunicacao :函数(事件){this.$emit("input", event.target.value)}},道具 : ["anuncio", "value"]}<模板><div><input v-on:input="mudarComunicacao"/><div></div><img v-on:click="testar" v-bind:src="this.url + anuncio.Imagem"/><div><div><跨度><a v-bind:href="this.url + '/' + anuncio.TipoImovel + 's/' + anuncio.ImovelId ">visualizar</a></span><跨度><a v-bind:href="this.url + '/' + anuncio.TipoImovel + 's/' + anuncio.ImovelId + '/edit' ">editar</a></span><span><span v-on:click="suspenderAnuncio">吊带</span></span></模板><样式范围></风格>
解决方案
在第二个导出的对象中(我假设的第二个脚本元素位于 App.vue 以外的另一个文件中，或者您可能是说那个版本是将不起作用)没有组件定义.您需要一个组件对象成员来注册嵌套组件 MenuHomeComponent 像这样.
It's incredible! I have already used nested components in Vue.js and they worked. Now, I created two more and they didn't work. I just can't see the problem.
obs. I will include only the two components that can't be nested.
App.vue
<template>
<div id="app">
<menu-home-component></menu-home-component> Here the component works but I want it in another component.
...
</template>
<script>
import MenuHomeComponent from './components/MenuHomeComponent'
import ImoveisDestaqueComponent from './components/ImoveisDestaqueComponent'
import PainelAnuncios from './components/PainelAnuncios'
var data = {
secao : "mensagens"
}
export default {
name: 'app',
components : {
MenuHomeComponent, ImoveisDestaqueComponent, PainelAnuncios
},
data : function() { return data }
}
</script>
This is the HomeComponent which contains the MenuHomeComponent. I can't use MenuHomeComponent , "Unknown custom element" error.
<template>
<div>
<menu-home-component></menu-home-component> "Unknown custom element here" error
</div>
</template>
<script>
import MenuHomeComponent from './MenuHomeComponent'
import ImoveisDestaqueComponent from './ImoveisDestaqueComponent'
export default {
name: "home"
}
</script>
MenuHomeComponent contains just a placeholder text:
<template>
<div>
Menu Home.
</div>
</template>
<script>
export default {
}
</script>
Updated to show a working scenario
This is the PainelAnuncios.vue Component
<script>
import ListaAnuncios from './ListaAnuncios';
import FetchData from 'vue-fetch-data';
import axios from 'axios';
export default {
name : "painelanuncios"
,
data: function() {
return {anuncios: [], erroConexao : false}
},
mounted ()
{
axios.get('http://www.example.com/anuncios2').then(response => { this.anuncios = response.data; }).catch( error => { this.erroConexao = true } );
},
methods: {
suspenderAnuncio: function(event)
{
alert("depois de alterado, ativo" + event.ativo);
axios.post('http://www.example.com/painel_de_controle/suspender_anuncio', { imovel_id : event.imovelId, tipo_imovel : 'casa', tipo_anuncio : 'venda', ativo : event.ativo }).then(response => { this.anuncios = response.data; }).catch( error => { alert("não foi possível atualizar o anúncio!") } );
}
}
}
</script>
<template>
<div>
<div v-if="erroConexao">
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Erro ao conectar!</strong> Por favor, verifique sua conexão com a internet.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<lista-anuncios v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncios="anuncios" ></lista-anuncios>
</div>
</template>
This is the ListaAnuncios.vue component
<script>
import Anuncio from './Anuncio';
export default {
name: "listaanuncios",
estaAberto : false,
props: ['anuncios', 'comunicacao'],
methods: {
suspenderAnuncio: function(event)
{
this.$emit('onSuspenderAnuncio', event);
},
testar : function(event)
{
alert("lieta testar");
}
}
}
</script>
<template>
<div>
<div>{{ comunicacao }}</div>
<div v-for="anuncio in anuncios" >
<anuncio v-model="comunicacao" v-on:onTestar="testar" v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncio="anuncio"></anuncio>
</div>
</div>
</template>
<style>
</style>
This is the Anuncio Component
<script>
export default {
name: 'anuncio',
data : function() {
return { estaAberto: false, url : 'http://www.example.com' }
},
methods: {
abrirMensagem : function() {
this.estaAberto = !this.estaAberto;
},
testar(event) {
this.$emit("onTestar", 'event');
},
suspenderAnuncio : function(event)
{
var ativo = parseInt(this.anuncio.Ativo);
alert("valor do ativo" + ativo);
if(ativo == 1)
{
ativo = 0;
}
else
{
ativo = 1;
}
this.anuncio.ativo = ativo;
this.$emit('onSuspenderAnuncio', { imovelId : this.anuncio.ImovelId, ativo : ativo });
},
mudarComunicacao : function(event) {
this.$emit("input", event.target.value)
}
}
,
props : ["anuncio", "value"]
}
</script>
<template>
<div>
<input v-on:input="mudarComunicacao" />
<div></div> <img v-on:click="testar" v-bind:src=" this.url + anuncio.Imagem" /><div> <div> <span> <a v-bind:href="this.url + '/' + anuncio.TipoImovel + 's/' + anuncio.ImovelId ">visualizar</a> </span> <span> <a v-bind:href="this.url + '/' + anuncio.TipoImovel + 's/' + anuncio.ImovelId + '/edit' ">editar</a> </span>
<span><span v-on:click="suspenderAnuncio">suspender</span></span>
</div> </div>
</div>
</template>
<style scoped>
</style>
解决方案
In the second exported object (the second script element that I assume is in another file other than App.vue, or maybe you are saying that is the version that will not work) there is no components definition. You need a components object member to register the nested component MenuHomeComponent like this.
<script>
import MenuHomeComponent from './MenuHomeComponent'
export default {
components: { MenuHomeComponent }
}
</script>
这篇关于在 Vue.js 中嵌套组件时出现未知的自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
