微信小程序的组件传值

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

引入组件

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

2,在父组件的.json写入

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

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

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

父传子

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

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

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

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

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

这里咱们在properties接收

type:传入的类型

value:默认值

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

 

这样就完成了

子传父

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

这里有两类参数

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

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

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

2接收

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

3.接收父组件传入的值

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

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

你可能感兴趣的:(小程序)