微信小程序组件调用和传值-父子传值

最新推荐文章于 2024-12-24 21:55:56 发布

原创最新推荐文章于 2024-12-24 21:55:56 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了在微信小程序中，如何在自定义组件中接收并显示父组件传递的值，以及如何通过触发事件将子组件的值传递回父组件。详细阐述了组件间的通信方式，并展示了相关代码实现。

components里面创建子组件

在这里插入图片描述

transfer.wxml

<view style="margin-top:30px">
	接收父组件的值：<text style="color:red">{{vals}}</text>
	<view style="margin-top:30px;margin-bottom:30px">
		<button bindtap="father">子组件向父组件传值</button>
	</view>
</view>

transfer.js

// components/transfer/transfer.js
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		tabTitle:{
			type:String,
			value:""
		}
	},
	lifetimes:{
		attached(){
				//查看父组件传递的值
				console.log("父组件传递的值------------>", this.properties.tabTitle)
				this.setData({
					vals:this.properties.tabTitle
				})
		}
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		vals:""
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		//向父组件传值
		father(){
			//传递的值
			let transferVla = "我是子组件传过来的值"
			//类似于vue里面的 $emit
			this.triggerEvent("trigger",transferVla)
		}
	}
})

父组件conp.json导入

{
  "usingComponents": {
    "transfer":"../../components/transfer/transfer"
  }
}

父组件conp.js

Page({
	data: {
    tabTitle:"我是父组件来的",
    receiveData:""
	},
	receiveTrigger(e){
    console.log('子组件传过来的======>',e.detail)
    this.setData({
      receiveData:e.detail
    })
  },

})

父组件conp.wxml

<view>
	<transfer bindtrigger="receiveTrigger" tabTitle="{{tabTitle}}"></transfer>
	<view>接收子组件传递的值：<text style="color:red">{{receiveData}}</text></view>
</view>