微信小程序框架 wepy 实现组件事件交互及通讯

2017-04-18 分类：前端之旅 / 微信平台阅读(7882) 评论(0)

今天有时间,又简单做了个小Demo试试,主要包含事件, 组件通讯,组件之间事件传输等等!

一组件事件传输

首先在 index.wpy 中, 引入我们的测试组件

import test from '../components/test

定义组件,定义一些数据

//定义组件
components = {
    footer:footer,
    header:header,
    list:list,
    search:search,
    test:test
}
//定义数据
data={
    imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    parentTitle: '这是啥啥啥'
};

//定义组件

components = {

footer:footer,

header:header,

list:list,

search:search,

test:test

}

//定义数据

data={

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

indicatorDots: false,

autoplay: true,

interval: 5000,

duration: 1000,

parentTitle: '这是啥啥啥'

};

首先的话,我们看看组件之间的事件传输,

wepy.component 基类提供三个方法 $broadcast，$emit，$invoke，

因此任一页面或任一组件都可以调用上述三种方法实现通信与交互，
$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序

$emit与$broadcast正好相反，事件发起组件的父组件会依次接收到$emit事件

$invoke是一个组件对另一个组件的直接调用，通过传入的组件路径找到相应组件，然后再调用其方法。

如果想在Page_Index中调用组件A的某个方法：

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

如果想在组件A中调用组件G的某个方法：

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

我们打开 test.wpy 组件, 在组件渲染完成事件中调用一次父组件的方法!

onLoad () {
 this.$emit('some-event');
}

onLoad () {

this.$emit('some-event');

}

在父组件也就是 index.wpy 里面接收事件

//组件事件
events = {
    'some-event':function () {
        console.info('你好,我是子组件调用夫组件的方法');
    }
}

//组件事件

events = {

'some-event':function () {

console.info('你好,我是子组件调用夫组件的方法');

}

父组件给子组件传递事件

onLoad = function () {
    this.$broadcast('testClick');
    this.setData({title: 'this is title'});
}

onLoad = function () {

this.$broadcast('testClick');

this.setData({title: 'this is title'});

}

子组件里

events = {
    testClick(){
        console.info('我是夫组件调用的子组件方法');
    }
};

events = {

testClick(){

console.info('我是夫组件调用的子组件方法');

}

};

二 ,组件props数据传输

在父组件里先import 进来组件然后使用, 和Vue类似

import wepy from 'wepy'
import footer from '../components/common/footer'
import header from  '../components/common/header'
import list from '../components/list'
import search from '../components/panel'
import test from '../components/test'
export default class Index extends wepy.page {
    config = {
        navigationBarTitleText: 'test'
    };
    //定义组件
    components = {
        footer:footer,
        header:header,
        list:list,
        search:search,
        test:test
    },

import wepy from 'wepy'

import footer from '../components/common/footer'

import header from '../components/common/header'

import list from '../components/list'

import search from '../components/panel'

import test from '../components/test'

export default class Index extends wepy.page {

config = {

navigationBarTitleText: 'test'

};