<span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
<sub id="h9j9p"><listing id="h9j9p"></listing></sub>

    <noframes id="h9j9p"><form id="h9j9p"></form>
    <form id="h9j9p"></form>
      <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

      <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>
        400-650-7353

        精品課程

        您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】微信小程序之自定義組件創建及使用

        【Web前端基礎知識】微信小程序之自定義組件創建及使用

        • 發布: Web前端培訓
        • 來源:
        • 2021-08-30 16:50:55
        • 閱讀()
        • 分享
        • 手機端入口

        一、自定義組件簡述

        開發者可以將頁面內的功能模塊抽象成自定義組件,以便在不同的頁面中重復使用;也可以將復雜的頁面拆分成多個低耦合的模塊,有助于代碼維護。自定義組件在使用時與基礎組件非常相似。

        二、如何創建自定義組件

        1、創建一個放自定義組件集合的文件夾,

        2、創建自定義組件的文件夾

        3、鼠標右鍵自定義組件文件夾新建Component

        三、如何引用

        1、在頁面組件的配置文件中注冊,配置文件為.json的文件

        ***圖中“my-btn”為組件的名字隨便寫,后面跟的組件的路徑***

        1. {   
        2.   "usingComponents": {   
        3.     "my-btn""../../components/mybtn/mybtn"   
        4.   }   
        5. }   

        2、在頁面.wxml文件中使用即可

        1.    

        四、組件的樣式設置

        組件的樣式很簡單,類比頁面,在.wxml中寫組件頁面結構,在.wxss中寫樣式

        注意!!!:類名選擇器必須使用class

        wxml文件:

        1. class="btn"> 我是mybtn組件   

        wxss文件:

        1.  .btn{     background: red;    }   

        五、 組件的數據和方法

        自定義組件中.js文件,data字段是存放數組的,methods是寫方法的,可類比vue學習,在data中寫入數據可在wxml中渲染

        1、如何渲染數據

        .js文件:

        1. data: {     
        2.     title: "我是按鈕"  
        3.  },  

        .wxml文件 :

        1. class="btn"> {{title}}    

        2、如何綁定數據

        .wxml文件:

        1. class="btn" bindtap="btnClick"> {{title}}    

        .js文件:

        1. methods: {   
        2.  
        3.   btnClick() {   
        4.  
        5.     console.log( "btnClick" );   
        6.  
        7.   }   
        8.  
        9. }   

        六、組件的對外開放屬性 -- properties

        組件的對外屬性,用來接收外界傳遞到組件中的數據,組件的 properties 和 data 的用法類似,它們都是可讀可寫的,只不過:

        -- data 更傾向于存儲組件的私有數據

        -- properties 更傾向于存儲外界傳遞到組件中的數據

        properties屬性不需要在自定義組件內部進行修改,是通過組件調用時傳遞進來的!!!

        語法結構 :

        1. 屬性名稱: {   
        2.     type:String,NUmber,【null不限制數據類型】   
        3.     value: ""   
        4. }   

        組件內定義:

        1. properties: {   
        2.     color: {   
        3.       type: String,   
        4.       value: "red"//默認顏色   
        5.    }   
        6. }  

        組件頁面中使用:

        1. "btnClick" style= "background: {{ color }}">{{title}}    

        使用自定義組件傳入對外開放屬性:

        1. "pink">   
        2. //此時button按鈕就會變成粉色   

         

        學習疑問申請解答
        您的姓名
        您的電話
        意向課程
         

        中公優就業

        IT小助手

        掃描上方二維碼添加好友,請備注:599,享學習福利。

        >>本文地址:
        注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

        推薦閱讀

        優就業:ujiuye

        關注中公優就業官方微信

        • 關注微信回復關鍵詞“大禮包”,享學習福利
        QQ交流群
        在線疑問解答
        (加群備注“網站”)
        IT培訓交流群 加入群聊 +
        軟件測試 加入群聊 +
        全鏈路UI/UE設計 加入群聊 +
        Python+人工智能 加入群聊 +
        互聯網營銷 加入群聊 +
        Java開發 加入群聊 +
        PHP開發 加入群聊 +
        VR/AR游戲開發 加入群聊 +
        大前端 加入群聊 +
        大數據 加入群聊 +
        Linux云計算 加入群聊 +
        優就業官方微信
        掃碼回復關鍵詞“大禮包”
        享學習福利

        測一測
        你適合學哪門IT技術?

        1 您的年齡

        2 您的學歷

        3 您更想做哪個方向的工作?

        獲取測試結果
         
        課程資料、活動優惠 領取通道
         
         
        亚洲日韩中文字幕一区
        <span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
        <sub id="h9j9p"><listing id="h9j9p"></listing></sub>

          <noframes id="h9j9p"><form id="h9j9p"></form>
          <form id="h9j9p"></form>
            <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

            <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>