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

Question

太不可思议了！我已经在 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>

Answer 1

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

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