微信小程序之父子组件传值通信与事件触发（最全实用总结）

我们这里说的都是微信小程序的自定义组件的相关内容哦。

最近写了一篇关于 Vue 的 父子组件通信与事件触发 感兴趣的小伙伴欢迎前往查看。

一、组件

1. 创建组件

1. 在对应目录下创建 Components 文件夹，用来存放我们的自定义组件。
2. 在刚刚创建的 Components 文件夹中右键 “新建 Component”，创建一组组件。
3. 组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成，在里面编写对应的内容即可。

2. 使用组件

1. 使用已注册的自定义组件前，需要在对应的页面或者组件的 json 下引入该组件

   {
     "usingComponents": {
       "Component": "page/Component/Component",
       "ChildComponent": "page/ChildComponent/ChildComponent"
     }
   }
   

2. 引入后，在页面的 wxml 中就可以像使用该组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

   // 页面 index.wxml 引入父组件 Component
   <view>
     <Component inner-text="Some text"></Component>
   </view>
   

   // 父组件引入子组件 ChildComponent
   <view>
     <ChildComponent></ChildComponent>
   </view>
   

二、父组件传递参数给子组件

1. 父组件传值：
   childValue 是子组件用来接收父组件传递的值，ParentValue 是父组件传递给子组件的值。

   // 父组件.wxml
   <text>这是父组件Component</text>
   <view>
     <ChildComponent childValue="{{ParentValue}}"></ChildComponent>
   </view>
   

   // 父组件.js
   Page({
   	data: { ParentValue : 'Parent'}
   })
   

2. 子组件接收：

   // 子组件.js
   // 在子组件中声明要接收的数据类型
   Component({
   	properties: {
   		childValue: String,  // String代表接收的参数类型
   	}
   })
   

   使用父组件传递过来的数据：

   // 子组件.wxml
   <text>我是子组件ChildComponent</text>
   <view>父组件传递过来的数据：{{childValue}}</view>
   

   
   这样子组件就可以接收到父组件传递过来的值。

三、子组件传递参数给父组件

方式1： 通过 triggerEvent() 方法

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

1. 给子组件自定义一个事件，并且传值

   // 子组件.wxml
   <view class="childContent">
     <text>我是子组件ChildComponent</text>
     <!-- <view>父组件传递过来的数据：{{childValue}}</view> -->
     <button type="primary" bindtap="handleTap">给父组件传值</button>
   </view>
   

   // 子组件.js
   methods: {
   	handleTap() {
   		// 定义要传递的数据
   		let value = "ChildValue"
   		// 触发绑定事件, myevent为绑定的事件名
   		this.triggerEvent('myevent', value)
   	},
   }
   

2. 为父组件中引入的子组件绑定事件

   // 父组件.wxml
   <view class="parentContent">
     <text>这是父组件Component</text>
     <view>
     	// 绑定子组件中`triggerEvent()`对应的事件方法
       <ChildComponent bindmyevent="myevent" class="my-component"></ChildComponent>
     </view>
     <view>父组件：子组件传递过来的数据 {{ParentValue}}</view>
   </view>
   

3. 接收子组件传递过来的内容

   // 父组件.js
   methods: {
   	myevent(e) {
   		// 这里通过 e 就可以接收子组件传过来的内容了
   		console.log(e.detail)
         	this.setData({
           	ParentValue: e.detail
   		})
   	}
   }
   

   

方式2： 通过在父组件里调用 this.selectComponent 获取子组件的实例对象。

为引入的子组件传入一个匹配选择器 selector，如：this.selectComponent(".my-component")，id 选择器与 class 选择器均可。

// 父组件
getChildComponent: function () {
    const child = this.selectComponent('.my-component');
    console.log(child)
}

父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this 对象。

四、父组件调用子组件方法

通过给子组件绑定 id 或 class 选择器，在父组件里调用 this.selectComponent 获取子组件的实例对象，就可以调用子组件中的方法。

// 子组件.js
methods: {
    Foo() {
      console.log("子组件的方法");
    }
  }

// 父组件.wxml
<view class="parentContent">
  <text>这是父组件Component</text>
  <view>
    <ChildComponent class="ChildEvent"></ChildComponent>
  </view>
  <button type="primary" bindtap="ChildFoo">父组件的按钮</button>
</view>

// 父组件.js
methods: {
	// 父组件点击事件，调用子组件方法
    ChildFoo() {
    	// 获取子组件的实例,可以提前获取
      	let Child = this.selectComponent('.ChildEvent');
      	// 调用子组件中定义的方法Foo()
      	Child.Foo();
    }
}

五、子组件调用父组件方法

子组件通过 this.triggerEvent() 来调用父组件的方法。

1. 在父组件引入的子组件上添加事件与方法名：
   ChildFun是子组件中的方法名，ParentFun是父组件中的方法名；
   我们通过子组件的ChildFun来调用父组件的ParentFun。

   // 父组件.wxml
   <view>
   	<ChildComponent bind:ChildFun="ParentFun"></ChildComponent>
   </view>
   

2. 在父组件中定义方法：

   // 父组件.js
   methods: {
   	ParentFun() {
   		console.log('父组件的方法');
   	}
   }
   

3. 在子组件中添加了一个点击事件，当用户触发点击事件clickParent()的时候，会执行子组件调用父组件：

   // 父组件.js
   methods: {
       clickParent() {
         this.triggerEvent('ChildFun' , )
       }
   }
   

4. 点击后，子组件就会执行在父组件中的ParentFun()。

注意：

this.triggerEvent('父组件中子组件上绑定的事件名' ,  )
# 后面的参数根据父组件的方法进行填写。
# 如果父组件没有接收参数， 则空着不写，如果接收一个参数就写一个，两个参数传入两个值。
# 比如：
# 父组件方法：
	ParentFun(res , res2) {
		console.log('父组件的方法' , res , res2);
	}
# 子组件执行方法：
	clickParent() {
		let res = "第一个参数",
		let data = "第二个参数"
		this.triggerEvent('ChildFun' , res , data )
	}

至此，小程序自定义组件的大部分使用场景都补充到了，在小程序的开发过程中对于该部分内容可以游刃有余了。

希望可以帮助到大家。有任何问题欢迎讨论留言。

各位 加油！