微信小程序的组件传值_小程序组件传值

说起微信小程序的传值我们就想起来了vue，其实大致分成了两种，一种是父传子，一种是子传父，这里我做了一下总结！

引入组件

1，首先在components注册咱们的组件。

2，在父组件的.json写入

"usingComponents": {
   "sear":"../../components/sear/sear"
 },

3.然后就在咱们的xhtml页面写入

<tabs></tabs>

这样咱们一个最基础的组件就写完了

父传子

1，首先在咱们父组件的.js文件的data声明要传入子组件的值这里我传入了一个父组

  data: {
    tabs:['综合','销量','价格']
  }

2，然后在咱们的页面xhtml传入子组件等待子组件接受

<tabs tabs="{{tabs}}"></tabs>

3.然后打开咱们的子组件，接受传过来的数据

  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

这里咱们在properties接收

type：传入的类型

value：默认值

4，子组件使用父组件传过来的值

 <block wx:for="{{tabs}}">

这样就完成了

子传父

1，子传值咱们使用this.triggerEvent('a',{b})传值

这里有两类参数

第一个是传入的事件名，这个名可以自己定义

第二类参数可以传无数个值，是子组件传入父组件的参数

  methods: {
    tabsBtn(index){
      let indexs = index.currentTarget.dataset.index
     this.triggerEvent('tabsBtn',{indexs})
    }
  }

2接收

<tabs tabs="{{tabs}}" bindtabsBtn="tabsBtn"></tabs>

使用bind+子组件传入事件名接收 然后在注册一个事件

3.接收父组件传入的值

  tabsBtn(indexs){
    console.log(indexs.detail.indexs)
  }

输出的就是父组件传过来的参数了