Parent child component association establishment

The first step is to create a parent.vue

<template>
	<div>
		<h1>father</h1>
	</div>
</template>

Then we configure the vue as the homepage of the node project in index.js under router

import Parent from '@/components/Parent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Parent',
      component: Parent
    }
  ]
})

With these two steps, we can press and hold the shift right mouse button under the project file, select here to open the command Pu, and then npm run dev;

Turn on the server and visit localhost: 8080 / to see the content of the parent component

Step 2: create the child component (Child.vue), and the parent group imports the child component

Sub components are long like this

<template>
	<div>
		<h1>son</h1>
	</div>
</template>

The parent class should be changed to

<template>
	<div>
		<h1>father</h1>
		<Child></Child>
	</div>
</template>

<script>
	import Child from './Child.vue'
	export default{
		components:{
			Child
		}
	}
</script>

In this way, we establish a component introduction relationship for these two components. The child components introduced in the parent component should be displayed in the browser

Thinking of parent-child component navigation bar

<template>
	<div class="parentWarp">
		<Child  txt="home page" 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="douban" 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="group" 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="A market" 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="My" 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>

Sub components

<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>