需求:
在每一个内页顶部添加一个Navbar,用于返回该页面的上一级页面。
目录:
新建Navbar.vue公共组件:
<template>
<div>
<span @click="goBack" class="back"> < </span>
<span class="dec_title">{{ title }}</span>
</div>
</template>
<script>
export default {
name: 'Navbar',
props: ['title'], // 调用该组件的父组件传值过来
methods: {
goBack() {
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.back {
font-size: 20px;
}
.dec_title {
margin-left: 35%;
}
</style>
在程序入口文件main.js中全局注册公共组件:
import Navbar from './components/Common/Navbar';
Vue.component(Navbar.name, Navbar);
在ChaoShi.vue中对公共组件的引用:
<Navbar :title="title" />
data() {
return {
title: '超市列表'
}
}
页面效果: