首页列表组件编写

最新推荐文章于 2024-11-08 16:09:18 发布

小二李

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量199

点赞数 3

分类专栏： Vue 3.0实战项目之『万年历』文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_43800535/article/details/136629999

版权

Vue 3.0实战项目之『万年历』专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章描述了在Vue应用中如何通过组件间通信，如`src/components/DayPage/List/item.vue`和`DayList`组件，使用props属性来传递数据并展示在`DayPage`组件的列表中，如当前年月、农历年份等信息。

摘要由CSDN通过智能技术生成

src\components\DayPage\List\item.vue

<template>
  <div class="list-item">
    <div class="block title">{{title}}</div>
    <div class="block content">{{content}}</div>
  </div>
</template>

<script>
  export default {
    name: 'ListItem',
    props: {
      title: String,
      content: String
    }
  }
</script>

src\components\DayPage\List\index.vue

<template>
  <div class="day-list">
    <list-item title="当前年月" :content="data['year-month']" />
    <list-item title="今年属相" :content="data.animalsYear" />
    <list-item title="农历年份" :content="data.lunarYear" />
    <list-item title="宜" :content="data.suit" />
    <list-item title="忌" :content="data.avoid" />
  </div>
</template>

<script>
import ListItem from "./item";
export default {
  name: "DayList",
  props: {
    data: Object,
  },
  components: {
    ListItem,
  },
};
</script>

src\views\Day.vue

首页

<template>
  <div class="container">
    <day-card :data='dayData'></day-card>
    <day-list :data='dayData'></day-list>
  </div>
</template>

<script>
import getData from '@/services'
import { getNowDate } from '@/libs/utils'
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'

import DayCard from '@/components/DayPage/Card'
import DayList from '@/components/DayPage/List'

export default {
  name: 'DayPage',
  components: { DayCard,DayList },
  setup() {
    const store = useStore(),
      state = store.state

    onMounted(() => {
      // getData(store, 'day', getNowDate('day'))
    })

    return {
      dayData: computed(()=> state.dayData)
    }
  },
}
</script>