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的三个实例被用作slot的内容，但visible-filters在其模板中没有用slot定义。

您已经定义show-query-filter有一个slot，但是您没有提供任何内容。目前尚不清楚您的预期结果是什么。请注意，槽内容不是它们所在槽的组件的子项。

Slot scoping rules

Vue 2 - 不呈现子组件

Vue 2 - child components are not rendered

vue.js

vue-component

vuejs2