小练习、组件传参、渲染
1、有以下广告数据（实际数据命名可以略做调整）
i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
2、在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, h2{
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after{
content:'';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background: #dddddd;
float: left;
margin: 10px;
}
.box img{
width: 100%;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
.nav, h2{
text-align: center;
}
.active{
background-color: pink; /*点击高亮第一步：设置高亮颜色*/
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<button @click="page='tv'" :class="{active: page === 'tv'}">TV</button> <!--点击高亮第三步：给button绑定点击事件，并控制属性设置属性值-->
<button @click="page='phone'" :class="{active: page === 'phone'}">Phone</button> <!--点击高亮第三步：给button绑定点击事件，并控制属性设置属性值-->
</div>
<!--展示数据-->
<div class="wrap" v-if="page === 'tv'"> <!--根据点击事件的属性值，设置if判断-->
<tag v-for="tv in ad_data.tv" :ad="tv" :key="tv.title" @action="change_select"></tag> <!--子传父：3、子组件中定义点击事件的执行函数@action="change_select"，拿到ad数据"-->
</div>
<div class="wrap" v-else-if="page === 'phone'" > <!--根据点击事件的属性值，设置if判断-->
<tag v-for="phone in ad_data.phone" :ad="phone" :key="phone.title" @action="change_select"></tag>
</div>
<h2>{{ select_ad}}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let ad_data = {
tv: [
{img: 'img/tv/001.jpg', title: 'tv1'},
{img: 'img/tv/002.jpg', title: 'tv2'},
{img: 'img/tv/003.jpg', title: 'tv3'},
{img: 'img/tv/004.jpg', title: 'tv4'},
],
phone: [
{img: 'img/phone/100.jpg', title: 'phone1'},
{img: 'img/phone/200.jpg', title: 'phone2'},
{img: 'img/phone/300.jpg', title: 'phone3'},
{img: 'img/phone/400.jpg', title: 'phone4'},
]
};
let tag ={
props:['ad'], // 父传子：子组件通过props自定义组件属性，通过反射拿到父组件中的数据
template:`
<div class="box" @click="send_ad(ad)" >
<img :src="ad.img" alt="">
<h2>{{ ad.title}}</h2>
</div>
`, <!--子传父：1、子组件中定义点击事件@click="send_ad(ad)"-->
methods:{
send_ad(ad){ <!--子传父：2、子组件中触发点击事件中定义的send_ad(ad)，带出ad数据"-->
this.$emit('action', ad);
}
}
};
new Vue({
el: '#app',
data: {
ad_data, // 数据注册
page:'tv', // 点击高亮第二步：设置 属性参数‘page’
select_ad:'未选择'
},
components:{ // 子组件注册
tag,
},
methods:{
change_select(ad){ <!--子传父：4、父组件中执行点击事件@action="change_select"，拿到ad数据"-->
this.select_ad = `${ad.title}被选中`;
}
}
})
</script>
</html>
