一、引言
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>
)
