父元件傳子元件案例：

 

<!--父-->
<!--父元件傳子元件用: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>