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警告]：属性或方法“ count”未在实例上定义，但在渲染期间被引用。

这是什么问题？对我来说很好！

Answer 1

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

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

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

1 个答案: