父子组件关联建立
第一步,创建一个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>