小程序组件--> 组件传参

小程序组件，在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件

如果多个地方需要使用到，可以在app.json中加入一下代码，相当于vue的全局组件。

"usingComponents": {
    "btn": "/components/文件夹名/js文件名"
  }

如果单独引用，直接在引用的json文件中

"usingComponents": {
    "btn": "/components/文件夹名/js文件名",
  }

如果是想用page里面的一个页面作为组件 只需要将他改为和component 格式一样即可  (在page里面写了，又突然觉得需要作为组件，可以用这个方法直接将整个文件丢进components) 一定要注意改造一下

需要注意的是小程序组件有自己的生命周期，文档

参考大佬链接  https://www.jianshu.com/p/7f366aba54c3

 

组件之间传参数  感觉和vue有一丢丢相似

父传子

父组件中写 传过去的值。传过去了之后呢，就直接他娘的 this.data.name 就拿到父组件传过去的值了  例如    

父组件     当然这个name 是需要在父组件中的data里面定义的

<view>
  <btn name='{{name}}'></btn>
</view>

子组件
Component({
  //vue里面是props(缩写)，这里是全称。用来接收父组件传过来的东西
  properties: {
    name: {
      type: String,//类型
      value: 'xxx'//默认值
    }
  },
  data: {
    
  }
})

 

子传父     咱先在子组件中 搞点事儿

子组件中搞de事儿
Component({
  //vue里面是props(缩写)，这里是全称。用来接收父组件传过来的东西
  properties: {
    name: {
      type: String,//类型
      value: 'xxx'//默认值
    }
  },
  data: {
    
  },
   methods:{
     giveFarther(){
       this.triggerEvent('giveFarther', { xixi: "666传值成功" }); //这里giveFarther就是事件名，后面带着的就是传过去值
     }
   }    
})    

<view>
  <btn name='{{name}}' bind:giveFarther="getSonName"></btn> //这里 就是在组件中绑定了一个子组件的事件名 giveFarther 随后在js中写
</view>

想象下面是JS文件哈

giveFarther(ev){
　　console.log(ev) //打印看看 
}

随附大佬链接 ：https://www.jianshu.com/p/ea830fe470fa