关于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 来访问对应的数据了


0
1
weixin_慕码人4351345
明白,谢谢老师!
2022-05-31
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程