小程序（二）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');

原著是一个有趣的人,若有侵权,请通知删除