weex 中使用vue语法使用，自定义navbar组件和navpage组件

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