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

小程序組件,在components文件夾右擊-->建立文件夾-->右擊-->新建component便可 建立一個組件vue

若是多個地方須要使用到,能夠在app.json中加入一下代碼,至關於vue的全局組件。json

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

若是單獨引用,直接在引用的json文件中小程序

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

若是是想用page裏面的一個頁面做爲組件 只須要將他改成和component 格式同樣便可  (在page裏面寫了,又忽然以爲須要做爲組件,能夠用這個方法直接將整個文件丟進components) 必定要注意改造一下app

須要注意的是小程序組件有本身的生命週期,文檔this

參考大佬連接  https://www.jianshu.com/p/7f366aba54c3spa

 

組件之間傳參數  感受和vue有一丟丟類似code

父傳子component

父組件中寫 傳過去的值。傳過去了以後呢,就直接他孃的 this.data.name 就拿到父組件傳過去的值了  例如    blog

父組件     固然這個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