一、引言
Vue.js 的组件化开发是其核心特性之一，它允许开发者将复杂的界面拆分为可复用的、独立的、小的组件，从而提高开发效率和代码的可维护性。
二、关键点
1.组件的定义
在components下创建.vue文件timecard.vue用来编辑内容。
文件创建完毕后，在timecard.vue内编写内容。以演出预告为例，包括演出节目、演出时间、演出状态。
<div class="content">
<div>演出节目</div>
<div>演出时间</div>
<div>演出状态：</div>
</div>然后设置该div的样式
.content {
box-shadow: 1px 1px 1px 1px #ccc;
width: 300px;
height: 50px;
margin: 10px;
padding: 10px;
border-radius: 5px;
}接着设置index.vue，在index.vue中的div设置标题和timecard的内容。同时在script中引入components文件中的timecard.vue。
设置完成后打开终端进入locahost查看
2.组件的传参：
1.父传子:
我们在 timecard内传属性name
<TimeCard :name="'张三'"></TimeCard>
然后在timecard中声明一个变量props用definprops来接受这个属性
const props=defineProps({
name:String
})
console.log(props);包含两个值，第一个name表示的是属性名，第二个string表示的是属性类型
打开html可以看到name已经被传过来了
接着复制一个更改name的值
接着我们在index.vue中创建一个存放演出数据的数组，然后在timecard标签中循环这个数组
<template>
<div class="content">
<div>演出节目：{{ props.title }}</div>
<div>演出时间：{{ props.start }}~{{ props.end }}</div>
</div>
</template>
<script setup>
const props = defineProps({
title: String,
start: String,
end: String
})
console.log(props);
</script>
<style scoped>
.content {
box-shadow: 1px 1px 1px 1px #ccc;
background-color: #fff;
width: 300px;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
</style>
引入计算函数和响应对象
import { computed, ref } from 'vue';声明状态的变量名，然后获取当前时分秒
const date = new Date();
let time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`之后根据时间来判断演出状态
let status = computed(() => {
// 判断演出状态1.未开始 2.进行中 3.已结束
if(time<props.start){
return{
color: '#0000ff',
msg: '未开始'
};
}else{
if(time<props.end){
return{
color: '#00ff00',
msg: '进行中'
};
}else{
return {
color: '#aaaaaa',
msg: '已结束'
};
}
}
})
这样就可以根据首页传来的演出信息来显示演出信息的状态
TimeCard.vue
<template>
<div class="content" :style="{color: status.color}">
<div>演出节目：{{ props.title }}</div>
<div>演出时间：{{ props.start }}~{{ props.end }}</div>
<div>演出状态:{{ status.msg }}</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue';
const props = defineProps({
title: String,
start: String,
end: String,
status: String
})
const date = new Date();
let time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
let status = computed(() => {
// 判断演出状态1.未开始 2.进行中 3.已结束
if(time<props.start){
return{
color: '#0000ff',
msg: '未开始'
};
}else{
if(time<props.end){
return{
color: '#00ff00',
msg: '进行中'
};
}else{
return {
color: '#aaaaaa',
msg: '已结束'
};
}
}
})
console.log(props);
</script>
<style scoped>
.content {
box-shadow: 1px 1px 1px 1px #ccc;
background-color: #fff;
width: 300px;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
</style>index.vue
<template>
<div>
<h1>index页面</h1>
<TimeCard v-for="(item, index) in list" :key="index" :title="item.title" :start="item.start" :end="item.end">
</TimeCard>
</div>
</template>
<script setup>
import TimeCard from '@/components/TimeCard.vue';
let list = [
{
title: "演出一",
start: '08:00:00',
end: '09:00:00',
status:'未开始'
},
{
title: "演出二",
start: '13:00:00',
end: '14:00:00',
status:'进行中'
},
{
title: "演出三",
start: '16:00:00',
end: '18:00:00',
status:'已结束'
}
]
</script>
<style lang="scss" scoped></style>
