微信小程序-父子组件通讯（传值）

目录

1.父组件传值给子组件

 2.子组件传值给父组件

---

前言

微信小程序中父子组件之间的通信主要通过以下几种方式实现：

1. 属性绑定：父组件可以通过在子组件的标签上设置属性，将数据传递到子组件。子组件可以在properties对象中定义这些属性，并在observers中监听这些属性的变化。例如，父组件可以这样传递数据给子组件：

   <getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode>

   子组件在properties中定义接收的属性：

   properties: { phone: { type: Number } }

2. 事件绑定：子组件可以通过触发事件来向父组件传递数据。子组件使用this.triggerEvent方法触发事件，父组件则通过bind绑定子组件的事件来接收数据。例如，子组件中触发事件：

   this.triggerEvent("tabsItemChange", { index: index });

   父组件中绑定子组件的事件：

   <Tabs bind:tabsItemChange="handleTabsItemChange"></Tabs>

3. 获取组件实例：在某些情况下，如果需要更直接的控制或者访问子组件的内部数据和方法，可以通过this.selectComponent方法获取子组件的实例。但这种方式并不推荐频繁使用，因为它破坏了组件的封装性。

微信小程序提供了多种父子组件通讯的方式，开发者可以根据实际需求和场景选择合适的方式进行数据传递和事件处理。

---

vue、微信小程序都能封装组件，那么就会涉及到一个问题，组件之间的通讯

1.父组件传值给子组件

父组件使用子组件：

<Tabs tabs="{{tabsList}}">
.....
.....

组件中：

/**
   * 组件的属性列表
   */
  properties: {
    tabs: {
      // 类型
      type: Array,
      // 默认值
      value: []
    }
  },
  // 监听传入的变量,当传入的值发生变化时,触发方法
  observers: {
    'tabs': function (val) {
      // val=》就是父组件传入组件中的tabsList数据
      console.log(val);
    }
  },
  data: {

  },

  /**
   * 子组件的方法列表
   */
  methods: {
    //子组件 发生点击事件时触发
    handleItemTap (e) {
      // 1 获取点击的索引
      const { index } = e.currentTarget.dataset;
      // 2 触发 父组件中的事件，传递数据给父组件  把当前点击的index数据传给父组件
      this.triggerEvent("tabsItemChange", { index: index });
    }
  }

这样，就能将tabsList这个数组传给子组件中的tabs变量，以供给子组件使用了

注意，在子组件中得到父组件传入的数据，不用再到data中声明一次，直接通过this.data.tabs就能拿到传入的数据了。

---

 2.子组件传值给父组件

一般在子组件中做了某些操作后，就要返回数据给父组件，最常见的就是：子组件中点击后触发一个方法，返回数据给父组件

 this.triggerEvent("方法名称", {key: val });   

这样就能将 {key: val } 这个数据通过一个方法返回给父组件

而父组件中，需要通过bind绑定子组件返回的这个方法，进而拿到传过来的数据

---

接下来用这个来做演示：this.triggerEvent("tabsItemChange", {name: 'cj' });   

tabsItemChange  ====> 就是bind要绑定的方法，至于父组件中要给这个绑定的方法关联什么名字的函数，随便起名字都行，这里我就起名叫做【getSonNameChange】

<Tabs tabs="{{tabsList}}" bindtabsItemChange="getSonNameChange">

         然后在父组件的js文件中声明这个函数，获取子组件传过来的数据，注意：是在父组件的js中定义这个函数！

  // 获取从子组件传回来的数据
  getSonNameChange (e) {
    //  获取子组件传过来的数据
    const { name } = e.detail 
  },

此时，就能获取到子组件传给父组件的数据了

---

注意： 子组件可以直接传一个对象给父组件，这样就不用把每个键值对都写出来了

    //子组件 发生点击事件时触发
    handleItemTap (e) {
      const sonData = { key1: value1, key2: value2, key3: value3 }
      // 2 触发 父组件中的事件，传递数据给父组件 
      this.triggerEvent("tabsItemChange", sonData);
    }

---

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！