Vue 2 - 不渲染子组件答案

【问题标题】：Vue 2 - child components are not renderedVue 2 - 不渲染子组件
【发布时间】：2017-07-05 20:37:32
【问题描述】：

目前我无法解决这个问题。主要父组件未呈现子组件。页面加载时不报错。

到目前为止我有这个代码：

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

});

我在这里做错了什么？

【问题讨论】：

您将show-query-filter 用作slot，而不是visible-filters 的子代。
我想我肯定迷路了：D。如果我删除插槽标签，则没有任何改变。
@Sasha visible-filters 应该包含 <slot></slot> 而不是 visible-filters

标签： vue.js vuejs2 vue-component

【解决方案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

【讨论】：