vue.js – 什么时候在VueJS生命周期中更新道具

我试图访问vuejs生命周期的挂钩中的prop,但它似乎没有任何价值

我的(真正简化的)组件如下所示:

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>

组件正确呈现,但挂载函数输出一个空数组,对我来说似乎是时间问题.

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

谢谢!

解决方法

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

更新
您的评论的简单答案是将根钩子更改为已创建而不是已挂载.但是,我觉得你这样做是错误的.现在我还没有看到你的代码,但我认为问题在于你更新数组.请阅读https://vuejs.org/v2/guide/list.html#Caveats的注意事项,然后查看此更新的演示https://jsfiddle.net/yj3k1wLx/4/

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...