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

目录

1.父组件传值给子组件

 2.子组件传值给父组件

---

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

1.父组件传值给子组件

父组件使用子组件：

.....
.....

组件中：

/**
   * 组件的属性列表
   */
  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】

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

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

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

---

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

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