{{route.query.name}}
{{route.query.zz}}
￥ {{route.query.price}}
{{item.name}}
{{item.zz}}
￥ {{item.price}}
Vue3 —— 组件练习题（附源码）
1.1、子组件A（页数按钮）
{{pzie + 1}}
1.1、父组件
店铺 收藏 购物车 结果1：展示图书列表 结果2：点击随意一本图书都可以，进入该详情页，因为已经实现了动态化 @click="showYear()">{{ year }}年 {{ month }}月{{ day }}日 星期{{ week }} 结果1：展示日期 结果2：选择年份，展示该年份的日期
手机扫一扫 移动阅读更方便 你可能感兴趣的文章
商品编号
商品名称
商品价格
{{item.id}}
{{item.name}}
{{item.price}}
跳转到： 页
</div> 1.3、运行结果
2.1、子组件A（可能想搜的）
{{item}}
2.2、子组件B（图书列表）
@click="clicklist(item)">
2.3、子组件C（图书详情页）
商品
详情
评论
推荐
2.4、父组件
筛选
默认
销量
价格
好评
出版价格
2.5、运行结果
3.1、组件A（天数）
{{day}}
3.2、组件B（选择年份）
3.3、父组件
{{ year }}年{{ month }}月
一
二
三
四
五
六
日
<!-- 右边 -->
<div id="right-box" style="display: none;margin-left: 50px;">
<div class="ri-head" style="cursor: pointer;">
<p style="color: #fff;padding-top: 15px;font-size: 16px;">{{ year }}年</p>
<p style="color: #aae9f1;">{{ month }}月{{ day }}日 星期{{ week }}</p>
</div>
<div class="ri-box">
<!-- 子组件 -->
<Ri\_year>
<!-- 包含了一个容器，负责装年份的数据 -->
<!-- 以下用了具名插槽#cc（与子组件的name必须一致）接受数据 -->
<template #cc="{ data }">
<div :class="{ year\_active: year == data.year }" @click="clickYear(data.year)">
{{ data.year }}
</div>
</template>
</Ri\_year>
</div>
</div>
</div> 3.4、运行结果
4.1、子组件A（定义选项卡的数据）
4.2、父组件
{{data.name}}
4.3、运行结果：
5.1、子组件A（第一页）
测试KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态
{{s}}
{{s}}
{{s}}
5.2、子组件B（第二页）
测试KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态
{{s}}
{{s}}
{{s}}
5.3、子组件C（第三页）
测试KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态
{{s}}
{{s}}
{{s}}
5.4、父组件
@click="componentId='A'" :class="{active: componentId === 'A'}">
选项卡 1
@click="componentId='B'" :class="{active: componentId === 'B'}">
选项卡 2
@click="componentId='C'" :class="{active: componentId === 'C'}">
选项卡 3
5.5、运行结果
