关于return {list: testData} 中的list
来源:4-5 ColumnList 组件编码
weixin_慕码人4351345
2022-05-31
老师,我是一名Vue初学者,请教一个基础知识,在App.vue中,return {list: testData} 中的list,没有看到它的定义,但又可以使用,这是Vue的哪方面概念,谢谢!
<template>
<div class="container">
<colmun-list :list="list"></colmun-list>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ColmunList, { ColumnProps } from './components/ColumnList.vue'
const testData: ColumnProps[] = [
{
id: 1,
title: 'test1的专栏',
description: '这是的test1专栏,有一段非常有意思的简介,可以更新一下欧',
avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
},
{
id: 2,
title: 'test2的专栏',
description: '这是的test2专栏,有一段非常有意思的简介,可以更新一下欧',
avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
}
]
export default defineComponent({
name: 'App',
components: {
ColmunList
},
setup () {
return {
list: testData
}
}
})
</script>
<style>
</style>
写回答
1回答
-
张轩
2022-05-31
同学你好
这个和 Vue 没有关系,它返回的是一个 object,而这个 key 可以是任意字段,这里只是命名为 list 而已,你还可以返回
{ 'myList': testData } //这个时候在模版中就是使用 myList 来访问对应的数据了
012022-05-31
相似问题