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 - 不渲染子组件

1 个答案: