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 属性来进行数据传递
