类似 v-on: 事件绑定风格

[wangzexi]

使用场景：
比如列表组件的共有事件：itemTap，itemLongTap。

这样写 props：

props = {
    bindItemTap: String,
    bindItemLongTap: String
};

当 Item 触发事件时，如下通知父组件：

this.$invoke(this.$parent, this.bindItemTap, { item, index });

即类似 vue 的 v-on:，在 html 标签中绑定事件处理函数。

[Gcaufy]

你的需求很好，后面看一下要不要实现，但现在因为rpops是可以传function的，所以现在也可以简单实现而不需要用$invoke:

// index.wpy

<child :fn="myFn"></child>

myFn () {
    console.log(`name: ${this.$name}`);
}

// child.wpy

props = {
    fn: {}
}

method = {
    tap () {
        this.fn.call(this.$parent)
    }
}

[Gcaufy]

这里有一个想法，你看看如何，满足你要的需求吗？

1. 原生事件简写，优化一下原生事件的写法

<button @tap="tap"></button>  => <button bindtap="tap"></button>
<button @tap.stop="tap"></button>  => <button catchtap="tap"></button>

2. 组件自定义事件

//index.wpy
<child @fn.user="myFn"></child>
data = {
    myFn () {
        console.log(`name: ${this.$name}`);
    }
}

// child.wpy
<button @tap="tap"></button>

method = {
    tap () {
        this.$emit('fn')
    }
}

[wangzexi]

:props 原来可以传 Function，学习了~

如果使用 @ 的话就太酷了，易读易写！🎉🎉🎉

[wangzexi]

wow！效率太高！酷！❤️

[wangzexi]

@customEvent.user 这里的 .user 表示此事件不是小程序原生事件是吗？

[Gcaufy]

对，@表示事件修饰符，customEvent 表示事件称，.user表示事件后缀，表示这个事件是用户自定义事件。
目前只有三种后缀：

• .default: 默认后缀，可以不写，表示这是一个bind事件
• .stop: 表示这是一个catch阻止冒泡的事件。
• .user: 表示这是一个用户自定义的组件事件，通过$emit触发。