小程序（二）WePy框架的组件

[TOC]

吐槽一下wepy文档：对没有做过前端的同志们是很不友好的，内心受到了一万点伤害。/(ㄒoㄒ)/~~

WePy组件化

[普通组件引用]

• 在.wpy文件的<script>脚本部分先import组件文件

• 在components对象中给组件声明唯一的组件ID

• 在<template>模板部分中添加以components对象中所声明的组件ID进行命名的自定义标签以插入组件

  这三点介绍还是有点太官方不接地气，用代码来注释下

<template>
    <view class="child1">
        ③<child></child>
    </view>

    <view class="child2">
        <anotherchild></anotherchild>
    </view>
</template>
<script>
    import wepy from 'wepy';
     ① import Child from '../components/child';
    export default class Index extends wepy.component {
         ②components = {
            //为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题
          ② child: Child,
            anotherchild: Child
        };
    }
</script>

[普通组件静态传值]

[传值]：<child :item="item"></child>

[接受]：
    props = {
            item: String//可以指定接受类型，现在为String类型
    };
[使用]：
    onLoad () {
        console.log(this.item); 
    }

[普通组件动态传值]

• .sync 父组件数据绑定至子组件
• props/twoWay: true 子组件数据绑定至父组件

​ twoWay默认表示子组件不向父组件传值，可不写

官网示例：
<child 1️⃣:title="parentTitle" 2️⃣:syncTitle.sync="parentTitle" 3️⃣:twoWayTitle="parentTitle"></child>

props = {
    // 静态传值
    1️⃣title: String,

    // 父向子单向动态传值
    2️⃣syncTitle: {
        type: String,
        default: 'null'
    },

    3️⃣twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

onLoad(){
 this.$apply();
 this.$parent.$apply();
}

[普通组件之间通信]

• $broadcast 【事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消】
  如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图：

  
  image

• $emit 【与$broadcast正好相反，事件发起组件的所有祖先组件会依次接收到$emit事件】
  如果组件ComE发起一个$emit事件，那么接收到事件的先后顺序为：组件ComA、页面Page_Index。
  image

this.$emit('some-event', 1, 2, 3, 4);

处理函数需要写在组件和页面的events对象中

events = {
        'some-event': (p1, p2, p3, $event) => {
               console.log(`${this.$name} receive ${$event.name} from    ${$event.source.$name}`);
        }
    };

• $invoke【一个页面或组件对另一个组件中的方法的直接调用】

  this.$invoke('ComA', 'someMethod', 'someArgs');