Javascript 为什么可以'；我不能访问组件中的道具吗？

我已将复制到单个文件组件（

Grid.vue

）中。在该组件中，我无法访问

列

属性

console.log（this.columns）

始终将：

[\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu。有人能告诉我为什么吗？这在页面和中的示例中效果很好

这是我的
Grid.vue
文件：

<script>
    export default {
        name: 'grid',

        props: {
            data: Array,
            columns: Array,
            filterKey: String
        },
        data: function() {
            var sortOrders = {}
            console.log(this.columns)
            this.columns.forEach((column) => {
                sortOrders[column] = 1
            });
            return {
                sortCol: '',
                sortOrders: sortOrders
            }
        },
        computed: {
            filteredData: function () {
                var sortCol = this.sortCol
                var filterKey = this.filterKey && this.filterKey.toLowerCase()
                var order = this.sortOrders[sortCol] || 1
                var data = this.data
                if (filterKey) {
                    data = data.filter((row) => {
                        return Object.keys(row).some((key) => {
                            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                        })
                    })
                }
                if (sortCol) {
                    data = data.slice().sort((a, b) => {
                        a = a[sortCol]
                        b = b[sortCol]
                        return (a === b ? 0 : a > b ? 1 : -1) * order
                    })
                }
                return data
            }
        },
        filters: {
            capitalize: function (str) {
                return str.charAt(0).toUpperCase() + str.slice(1)
            }
        },
        methods: {
            sortBy: function (key) {
                this.sortCol = key
                console.log(this.sortOrders[key])
                this.sortOrders[key] = this.sortOrders[key] * -1
                console.log(this.sortOrders[key])
            }
        },
        created() {

        },
        mounted() {
            // var app = this
        },
    }
</script>


导出默认值{
名称：“网格”，
道具：{
数据：数组，
列：数组，
filterKey:字符串
},
数据：函数（）{
var sortOrders={}
console.log（this.columns）
this.columns.forEach（（column）=>{
排序器[列]=1
});
返回{
sortCol:“”，
巫师：巫师
}
},
计算：{
filteredData:函数（）{
var sortCol=this.sortCol
var filterKey=this.filterKey&&this.filterKey.toLowerCase（）
var order=this.sortOrders[sortCol]| | 1
var data=this.data
如果（过滤键）{
数据=数据。过滤器（（行）=>{
返回Object.keys（行）.some（（键）=>{
返回字符串（行[key]）.toLowerCase（）.indexOf（filterKey）>-1
})
})
}
if（sortCol）{
data=data.slice（）.sort（（a，b）=>{
a=a[sortCol]
b=b[sortCol]
退货（a==b？0:a>b？1:-1）*订单
})
}
返回数据
}
},
过滤器：{
大写：函数（str）{
返回str.charAt（0）.toUpperCase（）+str.slice（1）
}
},
方法：{
排序：功能（键）{
this.sortCol=key
console.log（this.sortOrders[key]）
this.sortOrders[key]=this.sortOrders[key]*-1
console.log（this.sortOrders[key]）
}
},
创建（）{
},
安装的（）{
//var app=这个
},
}

我在另一个组件中使用此组件，如下所示：

<template>
    <div>
        <form id="search">
            Search <input name="query" v-model="searchQuery">
        </form>
        <grid :data="things" :columns="thingColumns" :filterKey="searchQuery"></grid>
    </div>
</template>

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

    export default {
        name: 'things-grid',

        data: function() {
            return {
                things: [],
                thingColumns: [],
                searchQuery: ''
            }
        },
        mounted() {
            var app = this

            app.things = [
                {id: 1, this: 'this 1', that: 'that 1', thing: 'thing 1'},
                {id: 2, this: 'this 2', that: 'that 2', thing: 'thing 2'},
                {id: 3, this: 'this 3', that: 'that 3', thing: 'thing 3'},
                {id: 4, this: 'this 4', that: 'that 4', thing: 'thing 4'},
                {id: 5, this: 'this 5', that: 'that 5', thing: 'thing 5'},
            ]

            app.thingColumns = [
                'this', 'that', 'thing'
            ]

            app.searchQuery = ''


        },
        components: { Grid }
    }
</script>


搜寻
从“/Grid.vue”导入网格；
导出默认值{
名称：'事物网格'，
数据：函数（）{
返回{
事物：[]，
thingColumns:[]，
搜索查询：“”
}
},
安装的（）{
var app=这个
app.things=[
{id:1，这个：'this 1'，那个：'that 1'，东西：'this 1'}，
{id:2，这个：'这个2'，那个：'那个2'，那个：'那个2'，那个东西：'那个东西2'}，
{id:3，这个：'this 3'，那个：'that 3'，那个：'this 3'}，
{id:4，这个：'this4'，那个：'this4'，那个：'this4'}，
{id:5，这个：'这个5'，那个：'那个5'，那个东西：'那个5'}，
]
app.thingColumns=[
“这个”、“那个”、“东西”
]
app.searchQuery=“”
},
组件：{Grid}
}
在：

由于
console.log（this.columns）
内部
Grid.vue/data（）
在装入时打印，即在装入前打印，因此打印空数组：

[\uuuuu ob\uuuuuu:Observer]//这是一个空数组，\uuuu ob\uuuuuuuu东西与Vue内部相关

因为，父级的
thingColumns
只有在执行
mounted（）
hook之后才会有数据

由于它是一个反应式数组，当您更新它时，它也会更新子
网格
组件



解决方案：
将属性初始化代码从
mounted（）
移动到
created（）
：

created（）{//was mounted（））
var app=这个
// ...
app.thingColumns=[
“这个”、“那个”、“东西”
]
// ...
},

这将更快地初始化数据，并使其及时可用，以便子对象中的
控制台.log（）
拾取数据。
因为vue中操作的所有道具和数据都包装在vue对象中，以使其具有反应性注意：在JSFIDLE示例中，它总是打印一些内容，因为
gridColumns
是使用项创建的（
gridColumns:['name'，power'，
），与您的不同，它是在没有项目（
thingColumns:[]，
）的情况下创建的，并且只填充在
mount（）
钩子中。如果您添加解决方案是将代码移动到
created（）
中，我可以将您的答案标记为正确。
<grid :data="things" :columns="thingColumns" :filterKey="searchQuery"></grid>