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

第一种方法triggerEvent() 方法

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

// list.wxml 组件

  
    
      {{item.title}}
      
        {{item.content}}
        
          
        
      
    
  
  
// 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 父组件


	

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)
	}
})

你可能感兴趣的:(微信小程序子组件向父组件传值的两个方法)