小程序組件,在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) //打印看看
}