vue组件化开发（底部导航兰）

父子组件关键联系

 一.创建父组件parent.vue

<template>

	<div>

		<h1>父组件的内容</h1>

	</div>

</template>

然后再router 下的index.js下该vue为node下的首页面

import Parent from '@/components/Parent'

Vue.use(Router)
export default new Router({

  routes: [
    {
      path: '/',
      name: 'Parent',
      component: Parent
    }
  ]
})

有了这两个我们就可以在该项目所在的文件下，按住shift键，鼠标右键点击打开所在命令，然后输入cnpm run dev ，就可以打开node 服务器。

二.创建子组件child.vue(父组件导入子组件)

子组件的内容

<template>
	<div>
		<h1>子组件的内容</h1>
	</div>
</template>

父组件的内容长这样

<template>
   <div>
     <h1>父组件的内容</h1>		
     <Child></Child>	
   </div>
</template>
 <script>	
      import Child from './Child.vue'
      export default{	
	components:{		
	      Child	
          }	
     }
</script>

 这样我们就建父子组件的连接关系，在父组件引入子组件后就能够显示子组件的信息

以下是制作导航栏的思路

父组件

<template>
 <div class="tableWarr">
  <Item txt="首页" bol=true mark=1 @change="fn2" v-bind:mess="selected">
   <img slot="normalImg" src="../assets/img/1.png"/>
   <img slot="activeImg" src="../assets/img/6.png" />
  </Item>
  <Item txt="搜索" bol=true mark=2 @change="fn2" v-bind:mess="selected">
    <img slot="normalImg" src="../assets/img/2.png"/>
    <img slot="activeImg" src="../assets/img/7.png"/>
  </Item>
  <Item txt="积分" bol=true mark=3 @change="fn2" v-bind:mess="selected">
     <img slot="normalImg" src="../assets/img/3.png"/>
     <img slot="activeImg" src="../assets/img/8.png"/>
  </Item>
  <Item txt="购物车" bol=true mark=4 @change="fn2" v-bind:mess="selected">
     <img slot="normalImg" src="../assets/img/4.png"/>
     <img slot="activeImg" src="../assets/img/9.png"/>
  </Item>
  <Item txt="我的" bol=true mark=5 @change="fn2" v-bind:mess="selected">
    <img slot="normalImg" src="../assets/img/5.png" />
    <img slot="activeImg" src="../assets/img/10.png"/>
  </Item> 
</div>
</template>

<script>
  import Item from './item'
    export default{
    
      components:{
          Item
      },

      data:function(){
         return{
           selected:1
         }
      },

      methods:{
        fn2:function(val){
            console.log(val);
             this.selected=val
        }
      }
    }

</script>

<style>
  .tableWarr{
    position: fixed;
    bottom: 0px;
  }
</style>

2.子组件

<template>
  <div class="itemWrap" @click="fn()">  
  <span v-show="bol"><slot name="normalImg"></slot></span>
  <span v-show="!bol"><slot name="activeImg"></slot></span>
   <span>{{txt}}</span>
  </div>
</template>

<script>
  export default{
     // 父传子
     props:['txt','bol','mark','mess'],
     computed:{
     bol:function(){
      if(this.mark==this.mess){
         return false;
      }
      else{
         return true;
      }
     }
     },
     methods:{
      fn:function(){
      console.log(this.mark);
      this.$emit("change",this.mark)       
      }
     }         
  }
</script>

<style>
  .itemWrap{
   width: 20%;
    height: 60px;
    float: left;
  }

  .itemWrap span{
    display: inline-block;
   text-align: center;
  }

  .itemWrap img{
    width: 40px;

  }
</style>