首先我們寫了一個(gè)組件叫做 bottomNav 的組件 作為底部導(dǎo)航使用
<template>
<div class="hello">
<!--底部導(dǎo)航-->
<div class="bot_nav">
<span v-for="(a,i) in arr" @click="go(a)">{{a}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
arr:["首頁(yè)","周邊","購(gòu)物車","我的"]
}
},
//方法鉤子函數(shù)
methods:{
go(i){
// 打印當(dāng)前導(dǎo)航對(duì)應(yīng)文字
console.log(i)
}
},
//初始化鉤子函數(shù)
mounted(){
console.log("初始化渲染")
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bot_nav{
width: 100%;
background: red;
display: flex;
flex-direction: row;
height: 3rem;
line-height: 3rem;
position: fixed;
bottom: 0;
left: 0;
}
.bot_nav span{
background: palegoldenrod;
display: inline-block;
flex: 1;
display: flex;
justify-content: center;
align-content: center;
}
</style>
這個(gè)情況下屬于已經(jīng)拋出組件了浪规。
在boss的頁(yè)面引用這個(gè)bottomNav組件 代碼如下：
<template>
<div class="hello">
boss頁(yè)面
<!--引用底部導(dǎo)航組件-->
<bottom-nav></bottom-nav>
</div>
</template>
<script>
//引用底部導(dǎo)航組件
import bottomNav from './zujian/bottomNav'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
bottomNav,
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
引用的時(shí)候有三個(gè)要注意的項(xiàng)：
（1）引用路徑：確保路徑正確
image.png
（2）聲明組件：components一定要聲明組件 聲明的組件之間用逗號(hào)隔開(kāi)
image.png
image.png
此時(shí)處理方法是在小寫前面加“-”
image.png
副路徑參考：
image.png
