微信小程序子组件向父组件传值的两种方法

 更新时间:2024年09月09日 14:30:54   作者:九亿少女无法触及的梦ى  
本文介绍了微信小程序中子组件向父组件传值的两种方法,这两种方法都能有效地实现子组件向父组件的数据传递,对于开发微信小程序的开发者来说,掌握这些技巧非常重要,感兴趣的朋友跟随小编一起看看吧

第一种方法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)
	}
})

第二种方法

页面布局和上面是一样的
.list 是子组件的class 名

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

到此这篇关于微信小程序子组件向父组件传值的两种方法的文章就介绍到这了,更多相关微信小程序子组件向父组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 网页前台通过js非法字符过滤代码(骂人的话等等)

    网页前台通过js非法字符过滤代码(骂人的话等等)

    项目中如果需要过滤非法字符(你不想用户输入的任何字符)的话在前台可以使用js过滤,同样可以提高用户体验,以前都是后台过滤,这样双重过滤用户体验更好。
    2010-05-05
  • 整理关于Bootstrap表单的慕课笔记

    整理关于Bootstrap表单的慕课笔记

    这篇文章主要为大家整理了关于Bootstrap表单的慕课笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript 表格左右收缩

    javascript 表格左右收缩

    javascript 表格左右收缩实现代码。
    2009-07-07
  • uni-app路由配置文件pages.json平台化拆分

    uni-app路由配置文件pages.json平台化拆分

    这篇文章主要为大家介绍了uni-app路由配置文件pages.json平台化拆分示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 如何判断鼠标是否在DIV的区域内

    如何判断鼠标是否在DIV的区域内

    通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域。 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道
    2013-11-11
  • JavaScript 装饰器模式用法详解

    JavaScript 装饰器模式用法详解

    装饰器模式(Decorator Pattern)是一种结构型设计模式,它允许动态地向一个对象添加新的行为,本文将带大家详细了解一下JavaScript装饰器模式,文中有相关的示例代码供大家参考,感兴趣的同学可以跟着小编一起学习
    2023-05-05
  • JavaScript 判断一个对象{}是否为空对象的简单方法

    JavaScript 判断一个对象{}是否为空对象的简单方法

    下面小编就为大家带来一篇JavaScript 判断一个对象{}是否为空对象的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 深入学习JS XML和Fetch请求

    深入学习JS XML和Fetch请求

    这篇文章主要介绍了深入学习JS XML和Fetch请求,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • JavaScript中的内存泄漏的原因

    JavaScript中的内存泄漏的原因

    本文主要介绍了聊一聊JavaScript中的内存泄漏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 自己使用js/jquery写的一个定制对话框控件

    自己使用js/jquery写的一个定制对话框控件

    自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中
    2014-05-05

最新评论