Vue 2 - 子コンポーネントはレンダリングされません

Question

現時点ではこの問題を回避することはできません。メインの親コンポーネントは子コンポーネントをレンダリングしていません。ページが読み込まれるとエラーはスローされません。

私はこれまでのところ、このコードを持っている：

HTML：

<td class="countries-visible-filter"> 

    <visible-filters> 
     <show-query-filter :selected ="true" query="all" name="All | "></show-query-filter> 
     <show-query-filter query="true" name="Visible | "></show-query-filter> 
     <show-query-filter query="false" name="Hidden"></show-query-filter> 
    </visible-filters> 

親コンポーネント：

Vue.component('visible-filters', { 
    template: ` 
     <div> 
      <span v-for="filter in queryFilters" 
       :class="{'text-muted' : !filter.isSelected}" 
       @mouseenter="changeClassMouseenter($event)" 
       @mouseout="changeClassMouseout($event)" 
       @click="countryTest(filter)" 
      > 
       {{filter.name}} 
      </span> 
     </div> 
    `, 

    methods: { 
     countryTest(filter) { 

      this.filters.forEach(singleFilter => { 
       console.log(singleFilter); 
      }); 

      Event.$emit('country-filter', filter); 
     } 
    }, 

    created() { 
     console.log(this); 
     this.queryFilters = this.$children; 
    }, 

    data() { 
     return { 
      queryFilters: [] 
     } 
    } 
}); 

子コンポーネント：

Vue.component('show-query-filter', { 
    template: ` 
     <div><slot></slot></div> 
    `, 

    props: { 
     query: '', 
     selected: false, 
     name: {required: true} 
    }, 

    mounted() { 
     this.isSelected = this.selected; 
    }, 

    methods: { 

     changeClassMouseenter(event) { 
      if(!this.selected) 
       event.target.classList.remove('text-muted') 
     }, 

     changeClassMouseout(event) { 
      if(!this.selected) 
       event.target.classList.add('text-muted') 
     } 
    }, 

    data() { 
     return { 
      isSelected: false 
     } 
    } 

}); 

ここで何が間違っていますか？

Answer 1

この構造は：

<visible-filters> 
    <show-query-filter :selected ="true" query="all" name="All | "></show-query-filter> 
    <show-query-filter query="true" name="Visible | "></show-query-filter> 
    <show-query-filter query="false" name="Hidden"></show-query-filter> 
</visible-filters> 

show-query-filterの3つのインスタンスがslotのコンテンツとして使用されていることを示しているが、visible-filtersは、そのテンプレートにslotで定義されていません。

あなたははslotを持つようにshow-query-filterを定義した、あなたはそれのために任意のコンテンツを提供していません。あなたの意図する結果が何であるかははっきりしません。スロットの内容は、スロットが挿入されているコンポーネントの子ではありません。

Slot scoping rules