父组件传子组件案例:
<!--父-->
<!--父组件传子组件用:sel-->
<template>
<div class="parent">
<item txt="主页" mark="1" @change="getVal" :sel="selected">
<img slot="normaImg" src="../assets/1.png">
<img slot="activeImg" src="../assets/6.png">
</item>
<item txt="搜索" mark="2" @change="getVal" :sel="selected">
<img slot="normaImg" src="../assets/2.png">
<img slot="activeImg" src="../assets/7.png">
</item>
<item txt="太阳" mark="3" @change="getVal" :sel="selected">
<img slot="normaImg" src="../assets/3.png">
<img slot="activeImg" src="../assets/8.png">
</item>
<item txt="购物车" mark="4" @change="getVal" :sel="selected">
<img slot="normaImg" src="../assets/4.png">
<img slot="activeImg" src="../assets/9.png">
</item>
<item txt="考拉" mark="5" @change="getVal" :sel="selected">
<img slot="normaImg" src="../assets/5.png">
<img slot="activeImg" src="../assets/10.png">
</item>
</div>
</template>
<script>
//导入子组件进来
import Item from'./demo1.vue'
export default{
components:{
Item
},
data:function(){
return{
//设置第一个图片默认值是:红色
selected:1
}
},
methods:{
getVal:function (val) {
console.log(val);
this.selected=val;
}
}
}
</script>
<style>
.parent{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
</style>
<!--子-->
<!--$emit子组件传父组件,props属性-->
<template>
<div class="child" @click="fn()">
<span v-show="bol"><slot name="normaImg"></slot></span>
<span v-show="!bol"><slot name="activeImg"></slot></span></br>
<span>{{txt}}</span>
</div>
</template>
<script>
export default {
/*父组件传给子组件的属性*/
props:['txt','mark','sel'],
/*computed计算方法*/
/*v-show的方法,判断mark值是第几张图片*/
computed:{
/*bo1的方法*/
bol:function(){
/*判断是哪张图片进行返回值*/
if (this.mark==this.sel){
return false;
}else{
return true;
}
}
},methods:{
fn:function () {
console.log(this.mark);
this.$emit("change",this.mark);
}
}
}
</script>
<style>
.child{
width: 20%;
float: left;
outline: 1px solid gainsboro;
}
</style>
案例:父传子
父组件:
<!--父组件-->
<template>
<div>
<h3>摄影社区热门小镇</h3>
<img src="" alt="">
<div v-for="item in list">
<child :item="item"></child></br>
</div>
</div>
</template>
<script>
import Child from './demo2xiaozhen.vue'
export default{
name:'',
components:{
child:Child
},
data:function () {
return{
list:[
{img1:require("../assets/pic_01.jpg"),title1:'风景阻击手',member:10,works:80},
{img1:require("../assets/pic_02.jpg"),title1:'舒适感',member:17,works:260},
{img1:require("../assets/pic_03.jpg"),title1:'定焦世界',member:122,works:70},
{img1:require("../assets/pic_04.jpg"),title1:'中华福乐园',member:40,works:330},
{img1:require("../assets/pic_05.jpg"),title1:'卡拍',member:190,works:980},
{img1:require("../assets/pic_06.jpg"),title1:'植物园',member:111,works:388}
]
}
}
}
</script>
子组件:
<!--子组件-->
<template>
<div>
<table>
<tr>
<td><img :src="item.img1"></td></br>
<td>{{item.title1}}</td></br>
<td>{{item.member}}</td></br>
<td>{{item.works}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name:"",
props:['item']
}
</script>