uniapp小程序父子组件传值

最新推荐文章于 2024-06-06 20:20:04 发布

RosyClouds~

最新推荐文章于 2024-06-06 20:20:04 发布

阅读量286

点赞数

文章标签： uni-app 小程序 javascript

本文链接：https://blog.csdn.net/qq_45213494/article/details/128947803

版权

文章介绍了uniapp中父子组件间通信的方法。子组件通过$emit触发事件并传递数据，父组件使用$on监听并接收数据；父组件则通过navigateTo跳转并利用eventChannel向子组件传递数据，子组件使用onLoad中的getOpenerEventChannel监听并获取数据。

摘要由CSDN通过智能技术生成

uniapp小程序父子组件传值

1、子向父传递

**子组件传值的写法**
// 保存
save() {
	let labelsList = this.newSkillList.filter(item =>item.actives == true)
	// 向上个页面传递labelsList
		uni.$emit('save', labelsList)
	//返回上一页
		uni.navigateBack({})
	}

**父组件接收的写法**
	onShow() {
		let self = this
		uni.$on('save', res => {
			self.labelsList = res
		})
	},
	
	onUnload() {
		// 移除监听事件  
		uni.$off('save');
	},

2、父向子传递数据

**父组件传值的写法**
// 跳转到选择技能页面
    let self = this
	uni.navigateTo({
		url: "./skillSelect",
			success: (res) => {
              // 通过eventChannel向被打开页面传送labelList对象或数组
				res.eventChannel.emit('datas', self.labelList)
			}
   })

**子组件接收的写法**
  onLoad() {
    let self = this
    const eventChannel = self.getOpenerEventChannel();
	// 监听datas事件，获取上一页面通过eventChannel传送的大量数据
		eventChannel.on('datas', (data) => {
			self.info = data
			console.log('拿到父组件的数据是', self.info)
		})
  },