微信小程序自定义组件传参

组件传参

1.父组件通过属性的方式给子组件传参
2.子组件通过事件的方式向父组件传参

父组件给子组件传参：

1.父组件中，在组件标签名中，将属性名和要传递的数据进行绑定，用于传递数据
2..在自定义组件(子组件)中有properties属性，里面存放要从父组件接收的数据，用于接收数据
3..格式为：属性名：{
		type: 数据类型         //要接收的数据的类型
		value: 默认值           //value默认值，没传时的默认值
}
4.此时就完成了父组件向子组件的传参，子组件引用时等价于子组件data中的数据进行引用

注：自定义组件中，回调函数要写在method中，
而页面的js文件中，存放事件的回调函数，存放在data的同层级下

这是组件的.js文件

Component({
  behaviors: [],
  // 组件属性列表,里面存放要从父组件接受的数据
  properties: {
      // 要接收数据的名称
      comList:{
        // type 要接收的数据的类型
        type:Array,
        // value默认值（没穿是的默认值）
        value:[]
  },
  data: {

  },
  lifetimes: {
    created() {
    },
    attached() {

    },
    moved() {

    },
    detached() {

    },
  },
  methods: {
    goNewsDetail(event){
      console.log(event);
      var newsId= event.currentTarget.dataset.newsid;
      console.log(newsId);
        wx.navigateTo({ 
          url:'../ActiveDetail/ActiveDetail?newsId=' + newsId,
        }) 
   
    },
  },
}); 

页面的.json文件：

{
  "usingComponents": {
    "list":"../../components/List/List"
  }
}

用于声明使用组件的标签名和组件路径

页面的.wxml文件：

<list comList="{{completedList}}">list>

此时将页面中引用的数组completedList的值传递给子组件，数据相当于存放在子组件data中直接使用即可

子组件向父组件传参：

1.在子组件上加入一个事件回调函数
2.并且在子组件回调函数中加入 this.triggerEvent("父组件自定义事件的名称",要传递的参数)
将要传递的值带给父组件
3.父组件上加入一个自定义事件（bind:自定义事件名)
3.父组件的自定义事件触发父组件的回调函数

子组件的.wxml文件：

<view class="tabs">
  <view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive===true?'active':''}}" 
    bindtap="handleItemTap" data-index="{{index}}">
        {{item.name}}
    view>
  view>
  <view class="tabs_content">内容view>
view>

子组件的.js文件:

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  // 里面存放的是要从父组件中接收的数据

  properties: {
  
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

//  1.页面的js文件中存放事件回调函数的时候，存放在data同层级下
// 2.组件的js文件中存放事件回调函数的时候，必须要存放在methods中
  methods: {
    handleItemTap(e){
          const index=e.currentTarget.dataset.index;
          // const {index}=e.currentTarget.dataset;
         // 解构 对 复杂类型进行解构的时候 复制了一份变量的引用而已
   
       
          this.triggerEvent("itemChange",{index});
    }
  }
})

父组件的.wxml文件

<Tabs tabs="{{tabs}}" bind:itemChange="handleItemChange" >Tabs>

bind:itemChange 是自定义事件，也可以将中间的:号省略

父组件的.js文件：

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
  },
  // 自定义事件 用来接收子组件传递的数据的
  handleItemChange(e){
      // 接收传递过来的参数
      //const index=e.detail.index;
      const {index}=e.detail;
      console.log(index);
  },
})

此时就将子组件中的index通过事件传递的方式传递过来了