1、自定義元件,需要父元件傳值得屬性放在props裡面
：style 可以寫多個屬性用逗號（,）分割，或者直接:background-color=”backgroundColor”

<template>
    <div class="container" :style="{height:height+'px', backgroundColor:backgroundColor}"  :data-role="dataRole">
        <div class="common left_div item_text"  :style="{height:height+'px'}"
 
 @click="onclickleftitem">
            <image class="common image" v-if="leftItemSrc" :src="leftItemSrc" ></image>
            <text class="common" v-if="leftItemTitle" :style="{color:leftItemColor}"> {{leftItemTitle}}</text>
        </div>
        <div class="common center_div"
 
 :style="{height:height+'px'}" >
            <text class="center_text" :color="titleColor">{{title}}</text>
        </div>
        <div class="common right_div"  :style="{height:height+'px'}"  @click="onclickrightitem">
            <text class="common item_text" v-if="rightItemTitle"
 
 :style="{color:rightItemColor}"> {{rightItemTitle}}</text>
            <image class="common image" v-if="rightItemSrc" :src="rightItemSrc" ></image>
        </div>
    </div>
</template>

<style scoped>
    .container {
        flex-direction: row;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 750px;
    }

    .common {
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: row;
    }
    .image{
        width: 50px;
        height: 50px;
    }

    .left_div {
        flex: 0.2;
    }

    .center_div {
        flex: 0.6;
    }

    .right_div {
        flex: 0.2;

    }

    .center_text {
        text-align: center;
        font-size: 36px;
        font-weight: bold;
    }
    .item_text {
        font-size: 32px;
    }

</style>

<script>
    export default {
        props:{
            'dataRole': {
                default: function () {
                  return 'navbar';
                }
            },
            //導航條背景色
            backgroundColor: {default:'black'},

            //導航條高度
            height: {default:88},

            //導航條標題
            title: {default:""},

            //導航條標題顏色
            titleColor: {default:'black'},

            //右側按鈕圖片
            rightItemSrc: {default:''},


            //右側按鈕標題
            rightItemTitle: {default:''},

            //右側按鈕標題顏色
            rightItemColor: {default:'black'},

            //左側按鈕圖片
            leftItemSrc: {default:''},

            //左側按鈕標題
            leftItemTitle: {default:''},

            //左側按鈕顏色
            leftItemColor: {default:'black'},
        },



        data() {
            return {
            }

        },
        components:{

        },
        methods: {
            onclickrightitem: function (e) {
                console.log('cody'+'right click');
                this.$emit('clickrightitem',{})
            },
            onclickleftitem: function (e) {
                console.log('cody'+' left click');
                this.$emit('clickleftitem',{})
            }
        }
    }
</script>

<template>
    <div class="wrapper">
        <yc_navbar :dataRole="dataRole" :height="height" :backgroundColor="backgroundColor" :title="title"
                    :titleColor="titleColor" :leftItemSrc="leftItemSrc" :leftItemTitle="leftItemTitle"
                    :leftItemColor="leftItemColor" :rightItemSrc="rightItemSrc"
                    :rightItemTitle="rightItemTitle" :rightItemColor="rightItemColor"
                   v-on:clickrightitem="onclickrightitem" v-on:clickleftitem="onclickleftitem"></yc_navbar>

        <div class="wrapper" :style="{marginTop:height+'px'}" >
            <slot></slot>
        </div>
    </div>
</template>

<style>
    .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 750px;
    }

</style>

<script>
    import yc_navbar from './yc-navbar.vue'
    export default {
        props:{
            'dataRole': {default: 'navbar'},
            //導航條背景色
            backgroundColor: {default:'black'},

            //導航條高度
            height: {default:88},

            //導航條標題
            title: {default:""},

            //導航條標題顏色
            titleColor: {default:'black'},

            //右側按鈕圖片
            rightItemSrc: {default:''},


            //右側按鈕標題
            rightItemTitle: {default:''},

            //右側按鈕標題顏色
            rightItemColor: {default:'black'},

            //左側按鈕圖片
            leftItemSrc: {default:''},

            //左側按鈕標題
            leftItemTitle: {default:''},

            //左側按鈕顏色
            leftItemColor: {default:'black'},
        },
        data() {
            return {
            }

        },
        components: {
            yc_navbar
        },
        methods : {
            onclickrightitem() {
                this.$emit('rightitemclick',{});
            },
            onclickleftitem() {
                console.log('cody page click')
                this.$emit('leftitemclick',{});
            }
        }

    }
</script>

使用v-on 自定義事件如上面，使用 props 屬性來進行資料傳遞