前端Vue框架(组件)

父组件传子组件案例：

 

<!--父-->
<!--父组件传子组件用: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>