在 Vue.js 中嵌套组件时出现未知的自定义元素

Posted 2023-02-22

【中文标题】在 Vue.js 中嵌套组件时出现未知的自定义元素

【英文标题】：Unknown custom element when nesting components in Vue.js

【发布时间】：2018-05-29 18:33:53

【问题描述】：

太不可思议了！我已经在 Vue.js 中使用过嵌套组件并且它们工作正常。现在，我又创建了两个，但它们不起作用。我只是看不出问题。

obs。我将只包括不能嵌套的两个组件。

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>

这是包含 MenuHomeComponent 的 HomeComponent。我无法使用 MenuHomeComponent ，出现“未知自定义元素”错误。

<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 只包含一个占位符文本：

<template>

    <div>
        Menu Home.
    </div>

</template>

<script>

    export default         
    

</script>

更新以显示工作场景

这是 PainelAnuncios.vue 组件

  <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">&times;</span>
  </button>
</div>
</div>

<lista-anuncios v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncios="anuncios" ></lista-anuncios>
</div>

</template>

这是 ListaAnuncios.vue 组件

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

这是 Anuncio 组件

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

【问题讨论】：

那么你是说你的 App.vue 组件文件中有两个模板和脚本元素块？我不确定你能做到这一点。

是的。这是不可能的。每个文件 1 个组件。任何自找麻烦的事情

不，每个文件一个。

随着@SciGuyMcQ 的解决，错误消失了。我更新了我的问题并包含了可以在另一个组件中使用的组件，而父组件上没有“组件”声明。有人能解释一下为什么吗？

还有一件事。我正在使用 vue 路由。

【参考方案1】：

在第二个导出的对象中（我假设的第二个脚本元素在 App.vue 以外的另一个文件中，或者您可能说这是不起作用的版本）中没有组件定义。您需要一个组件对象成员来注册嵌套组件MenuHomeComponent，就像这样。

<script>
    import MenuHomeComponent from './MenuHomeComponent'
    export default 
       components:  MenuHomeComponent 
    
</script>

【讨论】：

我认为我不需要这样做。此外，我完全按照我在这个问题中发布的方式使用了其他组件，我没有抛出错误。

我建议阅读文档vuejs.org/v2/guide/single-file-components.html

你能试试吗？我相当有信心@SciGuyMcQ 是正确的。

它工作了，但是......你能解释为什么我在我的问题更新中包含的组件工作：我更新了第一个代码块（App.vue），你可以看到它导入一个 PainelAnuncios 组件。在下面通过链的组件中，我从未使用过组件声明并且它有效。