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

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

[TOC]

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

WePy组件化

[普通组件引用]

• 在.wpy文件的

  [普通组件静态传值]

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

  [普通组件动态传值]

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

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

  官网示例：
  
  
  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');