小程序組件--> 組件傳參

小程序組件，在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