小程序父子组件通信全解析：属性绑定、事件绑定与获取组件实例

最新推荐文章于 2025-03-12 23:09:21 发布

阿贾克斯的黎明

最新推荐文章于 2025-03-12 23:09:21 发布

阅读量1k

点赞数 22

分类专栏：前端文章标签：服务器

本文链接：https://blog.csdn.net/m0_57836225/article/details/145383691

版权

前端专栏收录该内容

501 篇文章

订阅专栏

小程序父子组件通信全解析：属性绑定、事件绑定与获取组件实例

属性绑定：父向子传值

子组件内 count 值自增及引发的问题

事件绑定：子向父传值

获取组件实例：父组件直接访问子组件数据和方法

在小程序开发过程中，父子组件之间的通信是一项极为关键的技能。熟练掌握父子组件通信，能够显著提升代码的可维护性与复用性，使开发出的小程序更加高效、稳定。接下来，就让我们深入探究小程序中父子组件通信的三种主要方式：属性绑定、事件绑定和获取组件实例。

属性绑定：父向子传值

属性绑定主要用于父组件向子组件传递数据，不过它只能传递 JSON 兼容的数据，像普通的字符串、数字、布尔值等，无法传递方法这类复杂数据。

假设在父组件home中定义了一个count值，并希望将其传递给子组件，具体实现步骤如下：

父组件定义数据并渲染：在home.js文件中定义count变量并初始化为 0。

Page({
  data: {
    count: 0
  }
});

在home.wxml文件中渲染count的值：

<view>
  父组件中，咱们的count值是{
  
  {count}}
</view>

创建并注册子组件：在components目录下新建一个名为test5的文件夹，右键创建一个名为test5的组件。之后在app.json文件中进行全局注册：

{
  "usingComponents": {
    "test5": "/components/test5/test5"
  }
}

父组件通过属性绑定传值给子组件：在home.wxml文件中使用test5子组件，并通过属性绑定将count值传递给它：

<test5 count="{
  
  {count}}"></test5>
<view>--- 分割线 ---</view>

子组件接收并使用数据：在子组件test5.js文件中，通过properties节点声明count属性：

Component({
  properties: {
    count: {
      type: Number
    }
  }
});

在子组件test5.wxml文件中使用count属性的值：

<view>
  子组件中，count值是{
  
  {count}}
</view>

如此一来，父组件中的count值就成功传递到了子组件并得以使用。

子组件内 count 值自增及引发的问题

在子组件内部实现count值自增的效果，需要添加一个按钮并绑定点击事件处理函数。在test5.wxml文件中添加按钮：

<button bindtap="addCount">加一</button>

在test5.js文件的methods节点中定义addCount事件处理函数，实现count值自增：

Component({
  properties: {
    count: {
      type: Number
    }
  },
  methods: {
    addCount() {
      this.setData({
        count: this.properties.count + 1
      });
    }
  }
});

此时，点击子组件内的 “加一” 按钮，子组件中的count值会自增，但父组件中的count值并不会同步更新。这就引出了子组件向父组件传值的需求，而实现这一需求的关键就是事件绑定。

事件绑定：子向父传值

事件绑定是子组件向父组件传递数据的有效方式，它可以传递任意类型的数据，无论是简单数据还是复杂的方法。为了实现子组件向父组件传递自增后的count值，我们需要对代码进行如下修改：

子组件触发自定义事件并传递数据：在test5.js的addCount函数中，通过this.triggerEvent触发一个自定义事件，并将自增后的count值作为参数传递出去：

Component({
  properties: {
    count: {
      type: Number
    }
  },
  methods: {
    addCount() {
      const newCount = this.properties.count + 1;
      this.setData({
        count: newCount
      });
      this.triggerEvent('countChange', { value: newCount });
    }
  }
});

父组件监听自定义事件并更新数据：在home.wxml文件中，为test5组件绑定countChange自定义事件的处理函数：

<test5 count="{
  
  {count}}" bindcountChange="handleCountChange"></test5>
<view>--- 分割线 ---</view>

在home.js文件中定义handleCountChange事件处理函数，更新父组件中的count值：

Page({
  data: {
    count: 0
  },
  handleCountChange(e) {
    this.setData({
      count: e.detail.value
    });
  }
});

经过上述操作，当子组件中的count值自增后，会通过自定义事件将新值传递给父组件，父组件接收到新值后更新自身的count值，从而实现父子组件数据的同步。

获取组件实例：父组件直接访问子组件数据和方法

除了属性绑定和事件绑定，获取组件实例也是父子组件通信的一种方式。在父组件中，可以通过调用this.selectComponent方法获取指定子组件的实例对象，进而直接访问子组件中的任意数据和方法。

假设父组件home想要获取子组件test5的实例并访问其count属性值，在home.js文件中添加如下代码：

Page({
  data: {
    count: 0
  },
  handleCountChange(e) {
    this.setData({
      count: e.detail.value
    });
  },
  getChildData() {
    const childComponent = this.selectComponent('.test5');
    if (childComponent) {
      const childCount = childComponent.properties.count;
      console.log('子组件中的count值为:', childCount);
    }
  }
});

在home.wxml文件中添加一个按钮来触发获取子组件数据的操作：

<button bindtap="getChildData">获取子组件count值</button>
<test5 count="{
  
  {count}}" bindcountChange="handleCountChange"></test5>
<view>--- 分割线 ---</view>

当点击 “获取子组件 count 值” 按钮时，父组件就能获取到子组件的实例，并访问其count属性值。

通过属性绑定、事件绑定和获取组件实例这三种方式，开发者可以灵活地实现小程序中父子组件之间的数据传递与交互，构建出更加复杂且高效的小程序应用。在实际开发中，应根据具体的业务需求选择合适的通信方式，以提升开发效率和代码质量。