自定義組件的構(gòu)成

同樣是由json wxml wxss js 4個文件組成

聲明自定義組件

需要在 json 文件中進(jìn)行自定義組件聲明

{
  "component": true
}

局部樣式的使用

組件內(nèi)的樣式只對該組件起作用,而且在組件wxss中不應(yīng)使用 ID選擇器 、屬性選擇器 和 標(biāo)簽名 選擇器。

/* 這里的樣式只應(yīng)用于這個自定義組件 */
.inner {
  color: red;
}

組件的定義

使用 Component 方法來定義組件

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
    someData: {}
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function(){}
  }
})

使用自定義組件

在使用該組件的頁面 json中進(jìn)行配置,

{
  "usingComponents": {
   // 自定義標(biāo)簽名 : 組件的路徑
    "component-tag-name": "path/to/the/custom/component"
  }
}

然后象普通標(biāo)簽一個引用該自定義組件