wepy中组件通信与交互

红太狼 2022-04-11 03:27 289阅读 0赞

## events ##

events是wepy组件事件处理函数对象，存放响应组件之间通过emit、$invoke所传递的事件的函数

## $broadcast ##

父 -------> 子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]

## $emit ##

子 -------> 父

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 1]

## 组件自定义事件处理函数 ##

可以通过使用.user修饰符为自定义组件绑定事件，如：@customEvent.user=“myFn”  
其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀。  
目前总共有三种事件后缀：  
.default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；  
.stop: 绑定小程序捕获型事件，如catchtap；  
.user: 绑定用户自定义组件事件，通过$emit触发。  
**注意，如果用了自定义事件，则events中对应的监听函数不会再执行。**

## $invoke ##

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

代码演示：  
**父组件**

<style lang="less">
    
    </style>
    <template>
    	<view>
    		<p @tap="bbb">点击触发invoke</p>
    		<p>{
       {name}}</p>
    		<p>{
       {message}}</p>
    		<child @toParent.user = "aaa"></child>
    	</view>
    </template>
    <script>
    	import wepy from 'wepy'
    	import Child from '../components/child'
    	export default class News extends wepy.page {
    		data = {
    			name: 'xiaoming',
    			message:''
    		}
    		components={
    			child: Child
    		}
    		onLoad(){
    			  //父组件传递数据到子组件
    			  this.$broadcast('toChild', '我是父组件')
    		}
    		methods = {
    			//组件自定义处理函数
    			aaa(){
    			  this.message = '组件自定义事件处理函数，但是events中的监听函数不在执行了'
    			},
    			//父组件调用子组件的方法
    			bbb(){
    				this.$invoke('child', 'plus', 1)
    			}  
    		}
    		//接收$emit传过来的数据
    		events = {
    		  'toParent':(...args) => {
    		    console.log(args)
    		    this.message = args[0]
    		    let $event = args[args.length - 1]
    		    console.log($event)
    		    console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
    		  }
    		}
    	}
    </script>

**子组件**

<style lang="less">
    
    </style>
    <template>
      <view class="news">		
        <view>组件通信</view>
        <p>{
       {name}}</p>
        <button @tap="plus">点击我向父组件传递数据</button>
      </view>
    </template>
    <script>
    import wepy from 'wepy'
    export default class Child extends wepy.component {
      data = {
        name:''
      }
      //接收$broadcast传递过来的数据
      events = {
        'toChild':(...args) => {
          console.log(args)
          let $event = args[args.length - 1]
          console.log($event)
          console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
          this.name = args[0]
        }
      }
      methods = {
        //$invoke调用该方法
        plus(...args) {
          //接收$invoke传递过来的数据
          console.log(args)
          
          //子组件传递数据到父组件
          this.$emit('toParent','我是子组件')
        }
      }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20220411/19bdfcc75414411a953b917f015988c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 1]: /images/20220411/b3292e5f78d64df1983094596908da7d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 wepy父子组件props传值

WePY中父子组件之间传值依靠props来实现，props对象中声明了我们需要传递的值。传值有两种方式，包括静态传值和动态传值。静态传值父组件向子组件传递常量数据，

太过爱你忘了你带给我的痛/ 2023年06月05日 05:58/ 0 赞/ 9 阅读

相关 React Native与Android通信交互

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

痛定思痛。/ 2022年07月12日 08:07/ 0 赞/ 224 阅读

相关 react父组件与子组件进行通信

在使用react组件时，父子组件之间经常需要进行通信，那么是如何具体实现的呢？如下：父组件： class Parent extends Component {

秒速五厘米/ 2022年06月05日 09:10/ 0 赞/ 320 阅读

相关 react子组件与父组件通信

用 function prop 与父组件通信 props > props 本身是不可变的。当我们试图改变 props 的原始值时，React 会报出类型错误的警告，组件

短命女/ 2022年05月14日 10:29/ 0 赞/ 266 阅读

相关 wepy父子组件props传值

WePY中父子组件之间传值依靠props来实现，props对象中声明了我们需要传递的值。传值有两种方式，包括静态传值和动态传值。静态传值父组件向子组件传递常量数据，

ゝ一纸荒年。/ 2022年04月15日 02:29/ 0 赞/ 422 阅读

相关 wepy中组件通信与交互

events events是wepy组件事件处理函数对象，存放响应组件之间通过emit、$invoke所传递的事件的函数 $broadcast 父 -------

红太狼/ 2022年04月11日 03:27/ 0 赞/ 290 阅读

相关 vue 父组件与子组件相互通信

vue 父组件与子组件相互通信一、父组件给子组件传值 props 实现父组件向子组件传值。 1父组件里： <child-pack :msg

柔光的暖阳◎/ 2021年12月05日 15:56/ 0 赞/ 380 阅读

相关 wepy框架滑动组件使用

![在这里插入图片描述][20190514094617530.png] [https://github.com/dlhandsome/wepy-com-swiper][ht

- 日理万妓/ 2021年09月19日 10:36/ 0 赞/ 263 阅读

相关 Android -- 与WEB交互在同一个会话Session中通信

Session与Cookie

红太狼/ 2021年09月19日 09:32/ 0 赞/ 242 阅读

相关 Angular 通过Input/Output父子组件简单通信交互

前言 Angular中组件交互的方式有好多种，包含了通过`Input`/`Output`实现的指令通信交互，通过服务实现组件交互，在父子组件中最常用

素颜马尾好姑娘i/ 2021年09月16日 07:26/ 0 赞/ 376 阅读