微信小程序自定義封裝組件

寫一個簡單的小程序自定義封裝組件demo

index.json

{
  "usingComponents": {
    "Component": "../components/component"
  }
}

index.wxml 

<Component str="{{str}}" bind:sendData="getComponentData"></Component>

index.js

Page({
  data: {
    str: 'Hello World',
  
  },

  onLoad: function () {

  },
  getComponentData(e) {
    console.log(e.detail.content); // 子組件的值
  }

})

這裏是組件

component.josn

{
  "component": true
}

component.wxml

<view class="wraper">
    <view style="text-align: center; ">{{str}}</view>
    <button bindtap="_SendData">給父組件傳值</button>
</view>

component.js


Component({
    properties: { // 接收父組件傳來的數據
        str: { // 數據名稱
            type: String, // 數據類型 
            value: "默認值" // 數據默認值
        },
    },
    data: {
        str: "" // 組件內數據
    },
    methods: {
        /**
         * sendData  必須和父組件一致
         * ｛｝：須要傳的值
         */
        _SendData() {
            this.triggerEvent("sendData", {
                content: "我是子組件"
            })
        },
    },

    lifetimes: {
        // 當前組件生命週期
        created: function () {
            console.log("組件被建立");
        },
        attached: function () {
            console.log("組件開始加載");
        },
        ready: function () {
            console.log("組件加載完成");
        },
        moved: function () {
            console.log("在組件實例被移動到節點樹另外一個位置時執行");
        },
        detached: function () {
            console.log("在組件實例被從頁面節點樹移除時執行");
        },
        error: function () {
            console.log("每當組件方法拋出錯誤時執行");
        }
    },

    pageLifetimes: {
        // 組件所在頁面的生命週期
        show: function () {
            console.log("頁面被展現");
        },
        hide: function () {
            console.log("頁面被隱藏");
        },
        resize: function (size) {
            console.log("頁面尺寸變化");
        }
    }
});

注意點：

1. 自定義組件中css不能直接使用app.wxss中的公告樣式。
2. 組件內儘可能不要改變父組件傳來的數據。