weex自定义view及属性及点击事件

props向下通信：
父控件要对子控件设置属性，数据从父控件层传递到子控件层，向下传递数据。
$emit向上通信：
子控件内部点击事件，要在父控件层处理这个事件，就得向上抛事件给父控件。

类似自定义一个cell，先写个panel.vue文件

<template>
      <div class="panel" @click="onDivClicked">
        <div class="line topLine"></div>
        /// 三个控件和自己的三个属性绑定
        <text class="leftText mainText">{{MainTitle}}</text>
        <text class="leftText subText leftSubText">{{MainSubTitle}}</text>
        <text class="rightText subText">{{rightSubTitle}}</text>
        <div class="line bottomLine"></div>
      </div>
</template>

<script>
  export default {
      /// 申明自定义view的三个属性
      props:['MainTitle', 'MainSubTitle', 'rightSubTitle'],
      methods:{
          onDivClicked(e) {
              this.$emit('pannelClicked', { e });
            }
    }
  }
</script>

<style scoped>
  .panel {
    width: 750px;
    height: 156px;
    flex-direction: column;
    justify-content: center;
  }
  .mainText {
    font-size: 30px;
    color: #333333;
  }
  .subText {
    font-size: 26px;
    color: #aaaaaa;
  }
  .leftText {
    text-align: left;
    margin-left:30px;
  }
  .leftSubText {
    margin-top: 16px;
  }
  .rightText {
   text-align: left;
   position: absolute;
   right:30px;
   top: 65px;
  }
  .line {
    width: 750px;
    height: 0.5px;
    background-color: lightgray;
  }
  .topLine {
   position: absolute;
   right:0px;
   top:0px;

  }
  .bottomLine {
  position: absolute;
   right:0px;
   bottom:0px;

  }
  
</style>

然后我们在另外一个调用它即可，这里我在其内部写死了宽高，可根据实际情况处理

 <template>
<div>
 // 直接给自定义view上属性，如果要绑定就:MainTitle="当前vue的属性"
  <panel MainTitle='主标题'  MainSubTitle='主下副标题' rightSubTitle='右副标题' ></panel>
  <panel MainTitle='主标题'  MainSubTitle='主下副标题' rightSubTitle='右副标题' ></panel>
  <panel @pannelClicked="wwzzzz" MainTitle='主标题'  MainSubTitle='主下副标题' :rightSubTitle='superViewData' ></panel>
</div>

<script>
/// 类似iOS里的import头文件
  import panel from './panel.vue'
  export default {
/// 申明在这里方便template识别调用，猜的
     components:{
            panel,
        },
data:function() {
        return {
            superViewData:'父控件数据',
        }
    },
  }
</script>

实际效果

IMG_0779.PNG