<template>
<div v-if="destination">
<h2>{{ destination
.name }}</h2>
<CarouselView
v-if="carouselImages
.length > 0"
:images="carouselImages"
:title="destination
.name + ' 的美景'"
/>
<p>{{ destination
.description }}</p>
<p v-if="destination
.name === '巴黎'">
巴黎，一座将浪漫与现实交织得淋漓尽致的城市。踏入这片土地，仿佛置身于流动的盛宴之中。
塞纳河畔，垂柳依依，河水潺潺，见证着无数恋人的低语呢喃；香榭丽舍大道上，梧桐蔽日，
时尚与古典在此和谐共舞。卢浮宫里，蒙娜丽莎的微笑神秘而迷人，胜利女神的展翅欲飞震撼人心，
让人不禁感叹人类文明的璀璨光芒。然而，巴黎的街头也并非只有诗意，拥挤的人潮、喧嚣的车流，
以及偶尔擦肩而过的警惕眼神，都在提醒着人们这里真实的生活节奏。但正是这种浪漫与现实的交融，
让巴黎更加立体、更加迷人。每一次漫步，都是一次心灵的洗礼，让人在沉醉中
感悟生活的多姿多彩。
</p>
<p v-if="destination
.name === '罗马'">
罗马，一座承载着千年历史与文化的古老城市。踏入这片土地，仿佛穿越时空，回到了那个辉煌的古罗马时代。斗兽场的雄伟壮观，让人不禁想象当年角斗士们在此奋勇搏斗的场景；万神殿的巨大穹顶，彰显着古罗马建筑艺术的高超技艺；许愿池的精美雕刻，流淌着人们对美好生活的向往。
然而，罗马并非只有历史的厚重。街头巷尾，随处可见的咖啡馆里飘出浓郁的咖啡香，人们悠闲地享受着生活。这里既有古老的教堂、博物馆，传承着深厚的文化底蕴，又有现代的商店、餐厅，展现着都市的活力。罗马的魅力，就在于这种历史与现代的完美融合，让人在感受古老的同时，也能体验到现代生活的便捷与舒适。
</p>
<p v-if="destination
.name === '巴塞罗那'">
巴塞罗那，一座将艺术与生活完美融合的城市。漫步街头，高迪的建筑如同梦幻般的存在，圣家堂的雄伟、米拉之家的奇特、巴特罗之家的灵动，每一处都让人惊叹于建筑的无限可能。兰布拉大道上，人来人往，热闹非凡，街头艺人的表演为这座城市增添了无尽的活力。哥特区里，古老的街道和建筑诉说着历史的故事，让人仿佛穿越时空。而海滩边，金色的阳光、细腻的沙滩、湛蓝的海水，构成了一幅美丽的画卷。在这里，美食也是一大亮点，海鲜饭、Tapas等美味佳肴让人回味无穷。巴塞罗那，不仅有令人惊叹的建筑和美景，更有着独特的文化和魅力，让人流连忘返。
</p>
<p>欢迎来到 {{ destination
.name }}！这里是关于该目的地的详细介绍：</p>
<ul>
<li>名称: {{ destination
.name }}</li>
<li>描述: {{ destination
.description }}</li>
</ul>
<p>希望您喜欢这里的内容！如果您有任何疑问，请随时联系我们。</p>
</div>
<div v-else>
<p>正在加载目的地信息
...</p>
<p>请稍等片刻，我们将为您展示详细内容！</p>
</div>
</template>
<script>
import CarouselView from "
./CarouselView
.vue";
export default {
name: "DestinationDetail",
components: {
CarouselView,
},
props: {
id: {
type: [Number, String],
required: true,
},
},
data() {
return {
destination: null,
carouselImages: [],
};
},
watch: {
id: {
immediate: true,
handler() {
this
.fetchDestination();
},
},
},
methods: {
fetchDestination() {
const destinations = [
{
id: 1,
name: "巴黎",
description: "浪漫之都，埃菲尔铁塔等着你。",
image: "https://apple101
.com
.my/data/
2015/10/paris-5
.jpg",
carouselImages: [
"https://p1
.ifengimg
.com/2019_02/CB06FC73
17411A7
8563CF473A4CC6239BDFA0921_w10
80_h710
.jpg",
"https://apple101
.com
.my/data/
2015/10/paris-5
.jpg",
"https://youimg1
.c-ctrip
.com/target/100a1g000001gzga5BD36
.jpg",
],
},
{
id: 2,
name: "罗马",
description: "古迹之城，感受历史的厚重。",
image:
"https://img1
.qunarzz
.com/travel/d9/1612/62/a9aa60c23af2b5b5
.jpg_r_1360x1360x95_5dac3624
.jpg",
carouselImages: [
"https://resource
.36dong
.com/badazhou/www/res/201
8070
8/db9bb
8cc
8016762f9fa15ca07e3
8ee
86
.jpg",
"https://youimg1
.c-ctrip
.com/target/100m1c000001dol2jC1EC
.jpg",
"https://youimg1
.c-ctrip
.com/target/100v1c000001dq
8wf6226
.jpg",
],
},
{
id: 3,
name: "巴塞罗那",
description: "高迪的建筑奇观，热情的西班牙风情。",
image:
"https://youimg1
.c-ctrip
.com/target/100j1
80000013nccy
8AB0
.jpg",
carouselImages: [
"https://youimg1
.c-ctrip
.com/target/100j1
80000013nccy
8AB0
.jpg",
"https://n
.sinaimg
.cn/sinacn20111/30/w10
80h1350/201
81223/13e4-hqqzpku5515021
.jpg",
"https://n
.sinaimg
.cn/sinacn10120/30/w10
80h1350/20190131/2b32-hsmkfyn0004455
.jpg",
],
},
];
const selectedDestination = destinations
.find((d) => d
.id == this
.id);
if (selectedDestination) {
this
.destination = selectedDestination;
this
.carouselImages = selectedDestination
.carouselImages || [];
} else {
this
.destination = null;
this
.carouselImages = [];
}
},
},
};
</script>
<style scoped>
.centered-image {
display: block;
margin: 0 auto; /* 图片水平居中 */
max-width: 100%;
height: auto;
}
p {
margin: 10px 0;
font-size: 16px;
line-height: 1
.5;
}
ul {
list-style-type: disc;
padding-left: 20px;
}
</style>这个代码为子组件，<template>
<div>
<h2>旅游目的地详情</h2>
<DestinationDetail :id="$route
.params
.id" />
</div>
</template>
<script>
import DestinationDetail from '@/components/DestinationDetail
.vue';
export default {
components: {
DestinationDetail,
},
};
</script>这个为父组件，现在我想要加slot插槽，将文字<p v-if=“destination
.name === ‘巴黎’”>
巴黎，一座将浪漫与现实交织得淋漓尽致的城市。踏入这片土地，仿佛置身于流动的盛宴之中。
塞纳河畔，垂柳依依，河水潺潺，见证着无数恋人的低语呢喃；香榭丽舍大道上，梧桐蔽日，
时尚与古典在此和谐共舞。卢浮宫里，蒙娜丽莎的微笑神秘而迷人，胜利女神的展翅欲飞震撼人心，
让人不禁感叹人类文明的璀璨光芒。然而，巴黎的街头也并非只有诗意，拥挤的人潮、喧嚣的车流，
以及偶尔擦肩而过的警惕眼神，都在提醒着人们这里真实的生活节奏。但正是这种浪漫与现实的交融，
让巴黎更加立体、更加迷人。每一次漫步，都是一次心灵的洗礼，让人在沉醉中
感悟生活的多姿多彩。
</p>
<p v-if=“destination
.name === ‘罗马’”>
罗马，一座承载着千年历史与文化的古老城市。踏入这片土地，仿佛穿越时空，回到了那个辉煌的古罗马时代。斗兽场的雄伟壮观，让人不禁想象当年角斗士们在此奋勇搏斗的场景；万神殿的巨大穹顶，彰显着古罗马建筑艺术的高超技艺；许愿池的精美雕刻，流淌着人们对美好生活的向往。
然而，罗马并非只有历史的厚重。街头巷尾，随处可见的咖啡馆里飘出浓郁的咖啡香，人们悠闲地享受着生活。这里既有古老的教堂、博物馆，传承着深厚的文化底蕴，又有现代的商店、餐厅，展现着都市的活力。罗马的魅力，就在于这种历史与现代的完美融合，让人在感受古老的同时，也能体验到现代生活的便捷与舒适。
</p>
<p v-if=“destination
.name === ‘巴塞罗那’”>
巴塞罗那，一座将艺术与生活完美融合的城市。漫步街头，高迪的建筑如同梦幻般的存在，圣家堂的雄伟、米拉之家的奇特、巴特罗之家的灵动，每一处都让人惊叹于建筑的无限可能。兰布拉大道上，人来人往，热闹非凡，街头艺人的表演为这座城市增添了无尽的活力。哥特区里，古老的街道和建筑诉说着历史的故事，让人仿佛穿越时空。而海滩边，金色的阳光、细腻的沙滩、湛蓝的海水，构成了一幅美丽的画卷。在这里，美食也是一大亮点，海鲜饭、Tapas等美味佳肴让人回味无穷。巴塞罗那，不仅有令人惊叹的建筑和美景，更有着独特的文化和魅力，让人流连忘返。
</p>利用插槽实现
扫一扫
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
