微信小程序-父子组件间通信

  • Post author:
  • Post category:小程序




1.父子组件之间通信的三种方式

在这里插入图片描述



1.1属性绑定:父—>子

在子组件中的properties中先提前定义好父组件传递过来的数据,

 properties: {
    count:{
      type:Number,
      value:0
    }
  }
  
  注意:properties中的数据与data中的数据是一致的,直接可以被修改

在父组件中通过子组件标签以属性的方式传递数据给子组件

<son-comp count="{{count}}"></son-comp>

属性绑定(只能传递一些基础的数据,不能传递复杂数据如:函数)

在这里插入图片描述



1.2事件绑定:子—>父

在这里插入图片描述

步骤1:
	在父组件js文件中定义一个函数,这个函数通过自定义事件的形式传递给子组件
步骤2:
	在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件

	自定义事件:通过bind来实现
		 <标签 bind:自定义事件名称="步骤1中定义好的函数"></标签>
			或者
		 <标签 bind自定义事件名称="步骤1中定义好的函数"></标签>
步骤3:
	在子组件中通过this.triggerEvent("父组件传递过来的自定义事件名称",{携带参数}) =》来调用父组件传递过来的自定义事件
	
步骤4:
	在父组件自定义事件函数中通过event事件对象.detail 来获取参数

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



1.3获取组件实例:

获取组件实例:在父组件直接使用子组件中的数据和方法

在这里插入图片描述

 // 在父组件内部调用selectComponent(“子组件的class选择器或者id选择器”)
  getSonData(){
    // 在父组件中获取子组件实例对象
    const sonCompObj=this.selectComponent(".son")
    console.log(sonCompObj);
    // 使用子组件实例修改子组件内部属性
    /* sonCompObj.setData({
      "number":sonCompObj.data.number+10
    }) */
    // 使用子组件实例调用子组件内部方法
    sonCompObj.addNum()
  },
  	
  给子组件提供一个类选择器或者id选择器
   <son-comp class="son" bind:getSonComNumData="getSonComNumData" count="{{count}}"></son-comp>



版权声明:本文为weixin_46435234原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。