微信小程序15: 小程序组件

创建组件

①在项目的根目录中，鼠标右键，创建components -> test文件夹

②在新建的components -> test文件夹上，鼠标右键，点击“新建Component‘

③键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为js，json，wxml和wxSS

组件和页面的区别

组件的js和json与页面不同

• 组件的json文件中需要声明compontent：true属性
• 组件的js文件中调用的是Component（）函数
• 组件的事情处理函数需要定义methods节点

自定义组件样式

默认情况下，组件样式只会对当前组件生效，不会影响到组件之外的UI结构如图所示：

注意：app.wxss中的全局样式对组件无效
在使用组件的时候最好使用class选择器

修改组件的样式隔离

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 stylelsolation修改组件的样式隔离选项，用法如下：
js配置

Compontent({
   
  options:{
   
    stylelsolation:"isolated"
  }
})

json配置

{
   
  "stylelsolation":"isolated"
}

引用方式

局部和全局、两种引用方式

局部引用：组件只能在当前页面进行引用

在页面的json文件红进行引用

{
     
  "usingComponents": {
   
    "mytese":"/components/test/test"
  }
}

组件的使用

<mytese></mytese>

全部引用：组件可以在每个小程序中使用

在app.json文件中，引入组件

"usingComponents": {
   
  "mytest1":"/components/test1/test1"
}

然后在任何页面都可以使用该组件

<mytest1></mytest1>

经常使用的组件我们需要进行全局引用，局部引用在特定页面中

data数据

在小程序组件中，用于组件模版渲染和私有数据，需要定义到data节点中

/**
   * 组件的初始数据
   */
data: {
   
  count:1
},

methods方法

在小程序中，事件处理函数和自定义方法需要定义到methods节点中，示例如下：

<view>{
  {count}}</view>
<button bind:tap="addCount">+1</button>

js文件

methods: {
   
  addCount(){
   
    this.setData({
   
      count:this.data.count+1
    })
    this._showCount()
  },
  _showCount(){
   
    wx.showToast({
   
      title: 'count值为：'+this.data.count,
      icon:'none'
    })
  }
}
})

properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，示例代码：

/**
   * 组件的属性列表
   */
properties: {
   
  max:{
   
    type:Number,
      value:10
  },
},

当然也可以不定义value直接定义number
max:Number
使用

methods: {
   
  addCount(){
   
    if(this.data.count>=9) return