目录

1.父组件传值给子组件

2.子组件传值给父组件

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);
    }