小程序组件间通信与事件

目录

• 一、微信小程序父组件向子组件传值
• 二、微信小程序中子组件向父组件传值
• 三、微信小程序父组件调用子组件的方法
• 四、微信小程序子组件调用父组件的方法
• 五、微信小程序兄弟组件间的传值

一、微信小程序父组件向子组件传值

说明：父组件向子组件传值，通过“组件的属性列表”properties，组件属性列表值，是单向绑定，内部修改组件属性不会同步显示，组件外部(父组件)修改组件属性，内部展示跟着修改。
使用方式如下：

1、组件属性列表定义组件属性

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    innerMsg: {
      type: String,
      value: 'defaultvalue'
    },
    showNum: {
      type: Number,
      value: 100
    }
  },

2、组件中使用、展示属性

<view class='red'>
  {{innerMsg}}
</view>
<view>
  数字：{{showNum}}
</view>

3、父组件设置属性值

<show-two inner-msg='中文内容' show-num='11'></show-two>

二、微信小程序中子组件向父组件传值

1、第一种方法triggerEvent() 方法

triggerEvent方法用法类似于Vue中的emit()

list.wxml 子组件
<view>
  <block wx:for="{{data}}" wx:key="*this">
    <view class="box-list">
      <view class="title">{{item.title}}</view>
      <view class="content">
        <view>{{item.content}}</view>
        <view class="btn">
          <button type="primary" size="mini" bindtap="handleTap" data-index="{{index}}">传值</button>
        </view>
      </view>
    </view>
  </block>
  </view>

list 子组件 js

Component({
  // 从父组件接收的data 会自动同步到子组件的data 对象里面
   properties: {
	data: {
	  type: Array,
	  value: []
	}
    },
   methods: {
     handleTap(e) {
      let { index } = e.currentTarget.dataset;
      let data = this.data.data;
      // 自定义一个事件，并且传值
      this.triggerEvent('myevent',{params: data[index]},{})
    },
  }
})

home.wxml 父组件

<view>
   <list bindmyevent="myevent" data="{{list}}" class="list"></list>
</view>
Page({
  data: {
   list:[{
      title: '薛之谦',
      content: '《演员》《你还要我怎样》'
    },{
      title: '第二梦',
      content: '《风云1》《风云2》'
    }]
  },
  myevent(e) {
   // 这里就是子组件传过来的内容了
    console.log(e.detail.params)
  }
})

2、第二种方法

页面布局和上面是一样的

.list 是子组件的class名

// home.js 父组件的js

Page({
  onShow() {
	const instance = this.selectComponent('.list');
	// 打印出来的就是list 组件的实例了，这样就可以获取到子组件所有的数据了！
	// 注意！这里也可以调用setData 等方法直接修改组件的值
	console.log(instance)
  }
})

三、微信小程序父组件调用子组件的方法

1、定义子组件，定义一个tip组件，在tip.json中将component设置为true

{
  "component": true,
  "usingComponents": {}
}

在tip.js中设置被调用方法

showMyTips(content) {
    console.log(content)
},

2、引入组件，在index页面引入组件

index.json

{
  "usingComponents": {
    "tip":"/components/tip"
  },
  "disableScroll":true
}

index.wxml，父组件中需要调用的子组件，给它一个id类名，为之后准确查找

<tip id="tip"></tip>

3、调用方法，在父组件的js文件中使用子组件tip的方法

index.js

this.selectComponent("#tip").showMyTips('哈哈哈')

四、微信小程序子组件调用父组件的方法

1、子组件中定义方法
以message组件为例，在子组件定义的取消方法中，调用父组件cancle方法；
子组件message.js

cancle(){
    this.setData({
      show:false
    })
    this.triggerEvent('cancle',1)
  },

2、父组件绑定
details.wxml

<msg id="msg" bind:cancle="cancle"></msg>

details.js

cancle(res){
   console.log(res,'回调')
},

五、微信小程序兄弟组件间的传值

使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就是想要的状态和值

创建公共组件child，child2,父组件index

在父组件中index.wxml

<child1 bind:parentReceive="parentCallBack"></child1>
<child2 name="{{ name }}" type="{{ type }}"></child2>

index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
   
    name: '成都',
    type: 1
  },
  // 第三步：在回调函数的事件对象中进行数据更新
  parentCallBack(event) {
    console.log(event)
    let  name  = event.detail.name;
    this.setData({ // 更新数据
      name: name,
      type: 2
    })
  }
})

在child1.js中

// component/child/child1.js
Component({
  /*组件的属性列表*/
  properties: {
 
  },
 
  /*组件的初始数据*/
  data: {
 
  },
 
  /*组件的方法列表*/
  methods: {
    onMusic() {
      /*
       第一步：兄弟组件music，通过自定义事件的方式通知父组件
      */
      this.triggerEvent('parentReceive', {name: "终于等到你"}, {type:1})
    }
  }
})

child1.wxml中

<button bind:tap="onMusic">music组件通知它的兄弟组件Movie更新数据</button>

child2.wxml中

<view>歌曲名称：{{ name }}</view>
<view>类型：{{ type }}</view>

child2.js中

* 组件的属性列表*/
  properties: {
    name: String,
    type: Number
  },
 
  /* 组件的初始数据*/
  data: {
 
  },
 
  /* 组件的方法列表*/
  methods: {
 
  }