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鼠标右键，选择在此处打开命令浦，然后npm run dev;

开启服务器，访问localhost：8080/就应该能看到父类组件的内容

第二步创建子类组件(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="parentWarp">
		<Child  txt="首页" biaoji=1 @guodu="jieshou" :fu="xuanzhong">
			<img src="../assets/img/1.png" slot="wei">
			<img src="../assets/img/6.png" slot="dian">
		</Child>
		<Child  txt="书影音" biaoji=2 @guodu="jieshou" :fu="xuanzhong">
			<img src="../assets/img/2.png" slot="wei">
			<img src="../assets/img/7.png" slot="dian">
		</Child>
		<Child  txt="小组" biaoji=3 @guodu="jieshou" :fu="xuanzhong">
			<img src="../assets/img/3.png" slot="wei">
			<img src="../assets/img/8.png" slot="dian">
		</Child>
		<Child  txt="市集" biaoji=4 @guodu="jieshou" :fu="xuanzhong">
			<img src="../assets/img/4.png" slot="wei">
			<img src="../assets/img/9.png" slot="dian">
		</Child>
		<Child  txt="我的" biaoji=5 @guodu="jieshou" :fu="xuanzhong">
			<img src="../assets/img/5.png" slot="wei">
			<img src="../assets/img/10.png" slot="dian">
		</Child>
	</div>
</template>

<script>
	import Child from './Child.vue'
	export default{
		components:{
			Child
		},
		data:function(){
			return{
				xuanzhong:1,
			}
		},
		methods:{
			"jieshou":function(value){
				this.xuanzhong=value;
				// alert(value);
			}
		}
	}
</script>

<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	.parentWarp{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0px;
		/*border: 1px solid #000;*/
		height: 76px;
	}
</style>

子组件

<template>
	<div class="childWarp" @click="cDianji">
		<slot v-if="bol" name="wei"></slot>
		<slot v-else name="dian"></slot>
		<span :class="{colorWarp:!bol}" class="spanWarp"><h5>{{txt}}</h5></span>
	</div>
</template>

<script>
	export default{
		props:["txt","biaoji","fu"],
		methods:{
			"cDianji":function(){
				this.$emit("guodu",this.biaoji);
			}
		},
		computed:{
			bol:function(){
				if (this.biaoji==this.fu) {
					return false;
				}else{
					return true;
				}
			}
		}
	}
</script>

<style>
	.childWarp{
		width:20%;
		/*background-color: #00CD00;*/
		float: left;
	}
	.colorWarp{
		color: red;
		font-size: 18px;
	}
	.spanWarp{
		display: inline-block;
	}
</style>