javascript - Vue 数据未在组件中定义，但是它是

Question

我正在尝试做一些非常简单的事情，但是我遇到了问题!我可以看到这是我忽略的简单事情，但对我来说一切似乎都很好!

所以我有一个组件 m-input，目前我所做的只是根据数据属性值添加列表项。

<m-input>
    <div class="tabs">
        <ul>
            <li v-for="i in count"><a data-tab="address" v-html="'Address' + i">Address @{{ i }}</a></li>
        </ul>
    </div>
</m-input>

这就是组件，真的很简单吧？

<template>
    <div>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        props: [],
        data: function() {
            return {
                count: 3
            }
        },
        mounted() {},
        methods: {}
    }
</script>

如您所见，我正在添加一个数据属性 count，但是我收到以下错误:

[Vue warn]: Property or method "count" is not defined on the instance but referenced during render.

这里有什么问题？我觉得不错!

Answer 1

当您需要将子组件的数据属性公开给父组件时，您可以使用 Scoped Slots正如@webnoob 正确提到的那样。在您的子组件中，您需要在插槽中绑定(bind)该数据属性..

<template>
    <div>
        <slot :count="count"></slot>
    </div>
</template>
<script>
    export default {
        props: [],
        data: function() {
            return {
                count: 3
            }
        },
        mounted() {},
        methods: {}
    }
</script>

然后在父级中，您可以通过 slot-scope 属性公开该属性。结合 Object Destructuring 来稍微简化语法..

<m-input>
    <div class="tabs" slot-scope="{ count }">
        <ul>
            <li v-for="i in count"><a data-tab="address" v-html="'Address' + i">Address @{{ i }}</a></li>
        </ul>
    </div>
</m-input>