Vue.js Vue 2-未渲染子组件

我现在不能对这个问题绞尽脑汁。主父组件未呈现子组件。加载页面时不会引发任何错误

到目前为止，我有以下代码：

HTML:

父组件：

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

});

Vue.component（'visible-filters'{
模板：`
{{filter.name}
`,
方法：{
国家测试（过滤器）{
this.filters.forEach（singleFilter=>{
console.log（singleFilter）；
});
事件。$emit（'country-filter'，filter）；
}
},
创建（）{
console.log（this）；
this.queryFilters=this.$children；
},
数据（）{
返回{
查询过滤器：[]
}
}
});

子组件：

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

});

Vue.component（'show-query-filter'{
模板：`
`,
道具：{
查询：“”，
选择：false，
名称：{必需：true}
},
安装的（）{
this.isSelected=this.selected；
},
方法：{
changeClassMouseenter（事件）{
如果（！this.selected）
event.target.classList.remove（'text-muted'）
},
ChangeClassMousOut（事件）{
如果（！this.selected）
event.target.classList.add（'text-mute'）
}
},
数据（）{
返回{
结果：错
}
}
});

我做错了什么？

这个结构：

<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

的内容，但是

可见筛选器

没有在其模板中定义

slot

您已经定义了

show query filter

以具有

插槽

，但没有为其提供任何内容。现在还不清楚你的预期结果是什么。请注意，插槽内容不是其插槽所在组件的子级

---

您使用的是

显示查询过滤器

，而不是

可见过滤器

的孩子。我想我肯定在这里迷路了：D.如果我删除插槽标签，没有任何变化。@Sasha

可见过滤器

应该包含

而不是
可见过滤器