wepy中组件通信与交互

红太狼 2022-04-11 03:27 209阅读 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 条评论，209人围观）

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

相关阅读

相关组件通信

在vue组件化开发时候我们需要各个组件之间数据传递这时候就出现了组件通信分为三种模式父级组件向子级组件传数据父-子自定义属性和props来实现父子组件之间的数据

矫情吗；*/ 2022年11月30日 01:28/ 0 赞/ 100 阅读

相关 React Native与Android通信交互

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

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

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

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

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

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

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

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

相关 wepy父子组件props传值

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

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

相关 wepy中组件通信与交互

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

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

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

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

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

相关 wepy框架滑动组件使用

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

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

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

Session与Cookie

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

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

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

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