vue中公共头部的两种写法

2,298 阅读1分钟

方法一:

//定义子组件
<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'),
        },
    },
],