效果图
1.创建数据
content.js
import { reactive } from 'vue'const data = reactive({color:'red',title: '二十四节气',subTitle: '节气,是干支历中表示自然节律变化以及确立“十二月建”(月令)的特定节令。',list: [{name: "立春",content: '立春,为二十四节气之首。立,是“开始”之意;春,代表着温暖、生长。',imgUrl: require('../assets/images/01.png')},{name: "雨水",content: '雨水,是二十四节气之第2个节气。',imgUrl: require('../assets/images/02.png')},{name: "惊蛰",content: '惊蛰,是二十四节气中的第三个节气。',imgUrl: require('../assets/images/03.png')},{name: "春分",content: '春分,是二十四节气之一,春季第四个节气。',imgUrl: require('../assets/images/04.png')},{name: "清明",content: '清明,是二十四节气之一,春季的第五个节气。',imgUrl: require('../assets/images/05.png')},{name: "谷雨",content: '谷雨,是二十四节气之第6个节气,春季的最后一个节气。',imgUrl: require('../assets/images/06.png')},{name: "立夏",content: '立夏,是二十四节气中的第7个节气,夏季的第一个节气,交节时间在每年公历5月05-07日。',imgUrl: require('../assets/images/07.png')},{name: "小满",content: '小满,二十四节气中的第八个节气,也是夏季的第二个节气。',imgUrl: require('../assets/images/08.png')},{name: "芒种",content: '芒种,是二十四节气之第九个节气,夏季的第三个节气,干支历午月的起始。',imgUrl: require('../assets/images/09.png')},{name: "夏至",content: '夏至,是二十四节气的第10个节气。',imgUrl: require('../assets/images/10.png')},{name: "小暑",content: '小暑,是二十四节气之第十一个节气,干支历午月的结束以及未月的起始。',imgUrl: require('../assets/images/11.png')},{name: "大暑",content: '大暑,是二十四节气中的第十二个节气,也是夏季最后一个节气。',imgUrl: require('../assets/images/12.png')},{name: "立秋",content: '立秋,是“二十四节气”之第十三个节气,也是秋季的起始。',imgUrl: require('../assets/images/13.png')},{name: "处暑",content: '处暑,是二十四节气之第十四个节气,也是秋季的第二个节气。',imgUrl: require('../assets/images/15.png')},{name: "白露",content: '白露,是“二十四节气”中的第15个节气,秋季第3个节气,干支历申月的结束与酉月的起始。',imgUrl: require('../assets/images/16.png')},{name: "秋分",content: '秋分,是二十四节气之第十六个节气,秋季第四个节气。',imgUrl: require('../assets/images/17.png')},{name: "寒露",content: '寒露,是二十四节气之第十七个节气,秋季的第五个节气。',imgUrl: require('../assets/images/18.png')},{name: "霜降",content: '霜降,是二十四节气中的第十八个节气,秋季的最后一个节气。',imgUrl: require('../assets/images/19.png')},{name: "立冬",content: '立冬,是二十四节气之第十九个节气,也是冬季的起始。',imgUrl: require('../assets/images/20.png')},{name: "小雪",content: '小雪,是二十四节气中的第20个节气,冬季第2个节气。',imgUrl: require('../assets/images/21.png')},{name: "大雪",content: '大雪,是二十四节气中的第21个节气,冬季的第三个节气。',imgUrl: require('../assets/images/22.png')},{name: "冬至",content: '冬至,又称日南至、冬节、亚岁等,兼具自然与人文两大内涵,既是二十四节气中一个重要的节气,也是中国民间的传统祭祖节日。',imgUrl: require('../assets/images/23.png')},{name: "小寒",content: '小寒,是二十四节气中的第23个节气,冬季的第5个节气,干支历子月的结束与丑月的起始。',imgUrl: require('../assets/images/24.png')},{name: "大寒",content: '大寒,是二十四节气中的最后一个节气。',imgUrl: require('../assets/images/25.png')}]
})export default data
2.在app.vue 引入
<template><div id="app"><h3 class="title">{{ data.title }}</h3><div class="subtitle">{{ data.subTitle }}</div></div>
</template><script setup>
import data from "./stare/content.js";
</script>
3封装成组件headTitle
headTitle.vue
<template><h3 class="title">{{ title }}</h3><div class="subtitle">{{ subTitle }}</div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({title: {type: String,default: "默认标题",},subTitle: {type: String,default: "默认子标题",}
});
</script>
app.vue
<template><div id="app"><headTitle :title="data.title" :subTitle="data.subTitle" /></div>
</template>
<script setup>
import data from "./stare/content.js";
import headTitle from "./headTitle.vue"
</script>
4列表循环
app.vue
<template><div id="app"><headTitle :title="data.title" :subTitle="data.subTitle" /><div class="cont"><div v-for="(item, index) in data.list" :key="index" class="list"><div class="img"><img :src="item.imgUrl" /></div><div class="name">{{ item.name }}</div><div class="content">{{ item.content }}</div></div></div></div>
</template>
<script setup>
import data from "./stare/content.js";
import headTitle from "./headTitle.vue"
</script>
5封装list 内容
list.vue
<template><div class="cont"><div v-for="(item, index) in list" :key="index" class="list"><div class="img"><img :src="item.imgUrl" /></div><div class="name">{{ item.name }}</div><div class="content">{{ item.content }}</div></div></div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({list: {type: Array},
});
</script>
app.vue
<template><div id="app"><headTitle :title="data.title" :subTitle="data.subTitle" /><list :list="data.list"/></div>
</template>
<script setup>
import data from "./stare/content.js";
import headTitle from "./headTitle.vue"
import list from "./list.vue"
</script>
6封装 headTitle 和 list
cont.vue
<template><div :style="{ color: color }">ppp</div><headTitle :title="datas.title" :subTitle="datas.subTitle" /><listComponent :list="datas.list" />
</template>
<script setup>
import headTitle from "./headTitle.vue";
import listComponent from "./list.vue";
import { computed, defineProps } from "vue";
const props = defineProps({datas: {type: Object,default: () => ({}),},
});
console.log(props.datas.color);
const color = computed(() => {return props.datas.color;
});
</script>
<style>
</style>
app.vue 模拟api 请求数据
<template><div id="app"><cont :datas="data"></cont></div>
</template><script setup>
import { ref } from "vue";
import cont from "./components/cont.vue";
const data = ref({});
setTimeout(() => {import("./stare/content.js").then((res) => {console.log(res.default);data.value = res.default;});
}, 1000);
</script>