方法一:
//定义子组件
<template>
<header>
<p @click="goToHome">返回</p>
<p>{{title}}</p>
<p @click="clickRightText">{{rightText}}</p>
</header>
</template>
<script>
export default {
props:['title','rightText'],
methods:{
goToHome() {
this.$emit('goToHome')
},
clickRightText() {
this.$emit('clickRightText')
},
},
}
</script>
//父组件调用
<template>
<headerTop @goToHome="goToHome" @clickRightText="clickRightText" title="首页" rightText="右侧"></headerTop>
</template>
<script>
import headerTop from '@/components/header'
export default {
components:{
headerTop,
},
methods:{
goToHome(){
alert('点击左侧了');
},
clickRightText(){
alert('点击右侧了');
},
}
}
</script>
方法二:
<template>
<header>
<van-nav-bar
fixed
left-arrow
:title="$route.meta.nav_name"
:right-text="$route.meta.right_name"
@click-left="onClickLeft($route.meta.left_link)"
@click-right="$router.push($route.meta.right_link)"
:class="{nav_bg_red : $route.meta.nav_bg == 'red' , nav_bg_blue : $route.meta.nav_bg == 'blue'}">
<img :src="$route.meta.right_img" slot="right" v-if="$route.meta.right_img" alt>
</van-nav-bar>
</header>
</template>
<script>
export default {
methods:{
onClickLeft(left) {
if (left) {
this.$router.push(left);
} else {
this.$router.go(-1);
}
},
}
}
</script>
//在router路由中定义规则
routes: [
{
path: '/',
name: 'home',
component: home,
meta: {
nav_name : '首页',
right_name:'右侧文字',
left_link:'/money',//左侧点击链接
right_link:'/money',//右侧点击链接
nav_bg:'red',//判断标题背景颜色
},
},
{
path: '/user',
name: 'user',
component: user,
meta: {
nav_name : '个人中心',
right_img:require('@images/common/1.png'),
},
},
{
path: '/money',
name: 'money',
component: money,
meta: {
nav_name : '钱包',
right_img:require('@images/common/2.png'),
},
},
],