8

我正在尝试访问 vuejs 生命周期的挂载钩子中的道具，但它似乎没有任何价值

我的（真正简化的）组件如下所示：

export default {
    props: [
        'columns',
    ],
    mounted: function() {
        console.log(this.columns)
    }
}

父母看起来像这样：

<script>
    import DatatableHeader from './DatatableHeader.vue';

    export default {
        data: {
            columns: [{'heading': 'Column 1'}, {'heading': 'Column 2'}]
        },
        components: {
            'datatableheader'   : DatatableHeader,
        }
    }
</script>

组件正确渲染，但挂载函数的输出是一个空数组，这对我来说似乎是时间问题。

难道我做错了什么？或者我应该使用不同的生命周期钩子。

谢谢！

4

1 回答 1

3

简短的回答是您可以访问已安装挂钩中的道具。如果您检查此小提琴，您将看到警报成功显示列的标题。https://jsfiddle.net/yj3k1wLx/1/您的程序正在运行但返回一个空数组的事实似乎表明您实际上并没有传入列数组。<test :columns="columns">将小提琴与您的代码进行比较，看看您是否有错误的引用或变量。

更新 对您的评论的简单回答是将根挂钩更改为已创建而不是已安装。但是，我感觉你的做法是错误的。现在我还没有看到你的代码，但我认为问题在于你更新了数组。在此处阅读注意事项https://vuejs.org/v2/guide/list.html#Caveats然后查看此更新的演示https://jsfiddle.net/yj3k1wLx/4/

于 2016-11-16T18:35:19.610 回答