4.自定義組件、組件傳參|傳wxss|wxml代碼 · 小程序

[TOC] # 1.創建、使用自定義組件 1、創建目錄components用于存放組件 2、在components下創建第一個組件目錄music，創建完成后，右鍵目錄music，選擇創建一個component，輸入文件名：music，便得到了四個以music開頭的文件 3、在index頁面（"pages/index/index"）使用自定義組件music，先在index.json文件內注冊組件（組件名是可以自定義的，但得找到對應的文件目錄） ~~~ { "usingComponents": { "v-music": "/components/music/music" } } ~~~ 4、現在就可以在index.wxml文件使用組件了 ~~~ <v-music></v-music> ~~~ # 2.behavior，組件屬性封裝 behaviors 是用于組件間代碼共享的特性。每個 behavior 可以包含一組屬性、數據、生命周期函數和方法，組件引用它時，它的屬性、數據和方法會被合并到組件中，生命周期函數也會在對應時機被調用。每個組件可以引用多個 behavior 。 behavior 也可以引用其他 behavior 。 behavior 需要使用 Behavior() 構造器定義。 ***** 公共屬性my-behavior.js ~~~ // my-behavior.js var common = Behavior({ properties:{ title:String, content:String } }) export {common} ~~~ 組件movie.js ~~~ // components/movie/movie.js import {common} from "../my-behavior"; Component({ /** * 組件的屬性列表 */ // properties: { // title: String, // content: String // }, behaviors: [common], /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { } }) ~~~ # 3.自定義組件傳參 ## 1.父子傳參（頁面向組件傳參）例子： ### 1.現在在index.js下data里有一個參數id(id: 1997)需要傳遞給組件music ~~~ Page({ data: { id: 1997 } }) ~~~ ### 2.在index.wxml給組件定義一個屬性來承載參數 > **一旦給組件添加屬性，那么若添加的屬性想要在組件內使用，必須在組件屬性列表（properties:{}）內注冊** ~~~ <v-music id="{{id}}"></v-music> ~~~ ### 3.在組件music.js注冊屬性 > **屬性注冊需要規定數據類型type（必填），也可以給默認值value** ~~~ Component({ /** * 組件的屬性列表 */ properties: { /* 簡寫方式：id: Number */ id: { type: Number } }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { } }) ~~~ ### 4.數據已經傳遞給了組件，現在可以看下效果了，在music.wxml展示 ~~~ <view>{{id}}</view> ~~~ ## 2.子父傳參（組件向頁面傳參），詳細api點擊：[鏈接](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html) 在子組件中定義事件，向父組件傳遞任意數據例：現將組件music.js下data內的msg傳遞給index頁面 ### 1.在music.wxml添加點擊事件 ~~~ <view bindtap="onShow"> 我是誰？ </view> ~~~ ### 2.在music.js方法列表寫點擊函數 ~~~ Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { msg: "you are beautiful" }, /** * 組件的方法列表 */ methods: { onShow(){ var msg = this.data.msg; // 自定義組件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail對象,傳遞給父組件 this.triggerEvent('message',msg) } } }) ~~~ ### 3.在index.wxml綁定來自組件的事件，并給事件方法名 ~~~ <view class="container"> <v-music bind:message="onMshow"></v-music> </view> ~~~ ### 4.在index.js里便可以得到來自組件傳遞的參數 ~~~ Page({ data: { }, onMshow(e){ console.log(e.detail); // you are beautiful } }) ~~~ # 4.組件的wxss樣式由父節點編寫 ### 1.先在組件music.wxml添加class ~~~  <view bindtap="onShow" class="tag-class"> 我是誰？ </view> ~~~ ### 2.在組件music.js注冊 ~~~ // components/music/music.js Component({ /** * 組件的屬性列表 */ properties: {}, /* 添加祖冊項，向外暴露class */ externalClasses: ['tag-class'], /** * 組件的初始數據 */ data: { msg: "you are beautiful" }, }) ~~~ ### 3.在index.wxml接收來自組件的class名，并在index.wxss設置樣式 ~~~  <view class="container"> <v-music bind:message="onMshow" tag-class="font-color"></v-music> </view> ~~~ "pages/index/index.js" ~~~ .font-color{ color: red; } ~~~ # 5.父節點向子組件傳遞wxml代碼（將頁面的wxml代碼傳遞到組件） ### 1.在index.wxml添加需要添加到組件的代碼 ~~~  <view class="container"> <v-music bind:message="onMshow" tag-class="font-color"> <text slot="after">xhhh</text> </v-music> </view> ~~~ ### 2.在組件music.js設置注冊項 ~~~ // components/music/music.js Component({ /** * 組件的屬性列表 */ properties: {}, // 設置注冊項 options: { multipleSlots: true }, externalClasses: ['tag-class'], /** * 組件的初始數據 */ data: { msg: "you are beautiful" }, }) ~~~ ### 3.在組件music.wxml接收來自父組件的代碼段 ~~~  <view bindtap="onShow" class="tag-class"> 我是誰？  <slot name="after"></slot> </view> ~~~