vue元件化開發(底部導航蘭)
阿新 • • 發佈:2018-11-10
父子元件關鍵聯絡
一.建立父元件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>