组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听

  • 1. 组件的创建
  • 2. 组件的引用
    • 2.1. 局部引用
    • 2.2. 全局引用
    • 2.3. 组件和页面的区别
  • 3. 组件的样式隔离
    • 3.1. 默认情况,组件样式隔离性
    • 3.2. 修改组件的样式隔离选项
  • 4. 组件的data,methods和properties
    • 4.1. 组件中的data
    • 4.2. 组件的methods
    • 4.3. 组件的properties
    • 4.4. data 与 properties 的异同
  • 5. 组件的数据监听器
    • 5.1. 字段上的数据监听格式
    • 5.2. 对象属性上的数据监听格式
    • 5.3. **通配符的数据监听格式
    • 5.4. 数字求和的数据监听小demo
    • 5.5. 颜色RGB按钮的数据监听小demo

1. 组件的创建

组件的创建,在项目的根目录下创建components文件夹(只是为了见名知意),然后点击右键新建component即可。

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第1张图片

点击新建component之后,会自动为你创建四个文件,.js,.json,.wxml,.wxss

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第2张图片

注意:为了保证目录结构的清晰,建议把不同的组件,存放到单独目录中

2. 组件的引用

组件的引用方式分为“局部引用”和“全局引用”,
局部引用:组件只能在当前被引用的页面内使用。
全局引用:组件可以在每个小程序页面中使用。

2.1. 局部引用

局部引用组件,只需要在需要使用该组件的页面的.json文件中进行配置即可。局部引用组件,只能在当前页面进行引用。

格式如下,我们只需要在usingComponents中设定组件,以键值对的方式设定即可。
"usingComponents": {组件名:组件位置,}

例如:

{
  "usingComponents": {
      "my-component":"/components/test/test"
  }
}

使用方式:

<my-component>my-component>

2.2. 全局引用

全局引用同理,则需要在当前应用的的.json文件中进行配置。
全局引用配置,则可以在当前应用的所有页面进行使用

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#13A7A0",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  // 全局引用组件
  "usingComponents": {
      "my-component2":"/components/test/test"
  },
}

使用方式:

<my-component2>my-component2>

2.3. 组件和页面的区别

从文件组成结构来看,组件和页面的构成都是由.js,.json,.wxml,.wxss文件组成,但是其中.js与.json文件有明显不同。

.json文件,组件的.json文件中需要声明 “component”: true 属性

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第3张图片

.js 文件,组件的.js文件中调用的是component函数,页面的.js文件中调用的是page函数。

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第4张图片

组件的方法下需要定义到methods中,而页面的话方法是可以随意定义的只要在Page函数中就行。

3. 组件的样式隔离

3.1. 默认情况,组件样式隔离性

默认情况下,组件的样式具有隔离性,即自定义组件的样式只会对当前组件生效,不会影响到组件之外的其他元素。同时组件的样式也不会影响到外界其他元素的样式。

tips:只有class选择器会有样式的隔离效果,id选择器,属性选择器,标签选择器不受样式隔离的影响。

3.2. 修改组件的样式隔离选项

虽然默认情况下,自定义组件的样式隔离性能够防止组件内外样式互相干扰的问题。可以通过配置 option 中的 styleIsolation 的值来修改组件的样式隔离选项。

其中styleIsolation 可以配置的值有 isolated,apply-shared和shared

styleIsolation 选项从基础库版本 2.6.5 开始支持:
● isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
● apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
● shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

Component({
    properties: {},

    data: {},
  
    methods: {},
  
    options:{styleIsolation :'isolated'}
})


4. 组件的data,methods和properties

4.1. 组件中的data

在小程序组件中,用于组件模板渲染的私有数据,需要定义到 data 节点中(与页面的data作用是一样的)。

// components/test/test.js
Component({
  
    /**
     * 组件的初始数据
     */
    data: {
        count:0
    },
}

4.2. 组件的methods

在小程序组件中,事件处理函数和自定义方法需要定义到 methods 节点中.
一般情况下为了区分事件处理函数和自定义方法,我们在自定义方法前加一个下划线以示区分

// components/test/test.js
Component({
    methods: {
        // bindTap 绑定的事件处理函数
        addCount(){
            this.setData({
                count:this.data.count+1
            })
            this._showCount()
        },
      	// 自定义的方法
         _showCount(){
            console.log(this.data.count)
        }
    },
}

4.3. 组件的properties

在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据.

// components/test/test.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        // 简写定义,可以忽略默认值,只给数据类型
        max:Number,
        // 完整定义
        age:{
            type:Number,
            value:20
        }
    },
}

当我们在组件的properties中声明了属性,那么我们在组件中就可以使用这些属性。

<my-component max="20" age="10">my-component>

4.4. data 与 properties 的异同

在组件中,data与properties都是用来存放数据的,用法也都一样。

只不过data 更倾向于存储组件的私有数据,properties 更倾向于存储外界传递到组件中的数据

由于 data 数据和 properties 属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,或使用 setData 为 properties 中的属性重新赋值。

组件的js部分

// components/test/test.js
Component({
  /**
     * 组件的属性列表
     */
  properties: {
    // 简写定义,可以忽略默认值,只给数据类型
    max:Number,
    // 完整定义
    age:{
      type:Number,
      value:20
    }
  },

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

  /**
     * 组件的方法列表
     */
  methods: {
    addCount(){
      this.setData({
        count:this.data.count+1,
        max:this.properties.max+1
      })
      this._showCount()
    },
    _showCount(){
      console.log(this.data.count)
    }
  },
  options:{
    styleIsolation :'apply-shared'
  }
})

组件的wxml部分


<text class="t-color t-bold">components/test/test.wxmltext>
<view>{{max}}view>
<button bindtap="addCount">+1button>

页面的效果:

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第5张图片

5. 组件的数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作(一般都是监听setData的数据,即当有data中的字段或者对象被setData时就会触发数据监听

在组件中,需要在组件的.js文件中配置observers配置项即可,格式如下:

5.1. 字段上的数据监听格式

// components/test/test.js
Component({
  	// 组件的data数据监听,只要字段A或者字段B发生了变化,都会触发数据监听器
    observers:{
        '字段A,字段B':function(字段A的新值,字段B的新值){
            // 函数体 ---- 字段A或字段B被setData赋新值时会触发
        }
    }
})

这里的字段A,字段B可以是任意多个的字段,如果太多则可以使用**通配符来匹配。

5.2. 对象属性上的数据监听格式

对象的属性上的数据监听,只需要以对象.属性的方式即可。

// components/test/test.js
Component({
  	// 组件的data数据监听,只要字段A或者字段B发生了变化,都会触发数据监听器
    observers:{
        '对象.属性A,对象.属性B':function(对象.属性A的新值,对象.属性B的新值){
            // 函数体 ---- 对象的属性A或属性B,被setData赋新值时会触发
        }
    }
})

5.3. **通配符的数据监听格式

**通配符,可以用作匹配任意字段,也可以用作匹配对象的任意属性

  1. 匹配任意字段
// components/test/test.js
Component({
  	// 组件的data数据监听,只要字段A或者字段B发生了变化,都会触发数据监听器
    observers:{
        '**':function(){
            // 函数体 ---- 数据的任意setData都会触发
        }
    }
})
  1. 匹配对象的任意属性
// components/test/test.js
Component({
  	// 组件的data数据监听,只要字段A或者字段B发生了变化,都会触发数据监听器
    observers:{
        'obj.**':function(newObj){
            // 函数体 ---- 对象的任意属性的setData都会触发
        }
    }
})

5.4. 数字求和的数据监听小demo

组件的结构(.wxml)

<view>{{num1}} + {{num2}} = {{sum}}view>
<button bindtap="addNum1">num1+1button>
<button bindtap="addNum2">num2+1button>

组件的.js部分

// components/test2/test2.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        num1:0,
        num2:0,
        sum:0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        addNum1(){
            this.setData({
                num1:this.data.num1+1
            })
        },
        addNum2(){
            this.setData({
                num2:this.data.num2+1
            })
        }
    },

    // 数据监听器
    observers:{
        'num1,num2':function(newNum1,newNum2){
            this.setData({
                sum:newNum1+newNum2
            })
        }
    }
})

组件的全局引用,为了方便就直接全局引用了(app.json)

{
  "usingComponents": {
      "my-test2":"/components/test2/test2"
  },
}

页面的使用

<my-test2>my-test2>

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第6张图片

5.5. 颜色RGB按钮的数据监听小demo

组件wxml部分:

<view style="background-color: rgb({{fullColor}});" class="colorBox">
  颜色值:{{fullColor}}    
view>

<button size="mini" bindtap="changeR" type="default">Rbutton>
<button size="mini" bindtap="changeG" type="primary">Gbutton>
<button size="mini" bindtap="changeB" type="warn">Bbutton>

组件wxss部分:

.colorBox{
  line-height: 200rpx;
  font-size: 24rpx;
  color:white;
  text-shadow: 0rpx 0rpx 2rpx black;
  text-align: center;
}

组件js部分:

// components/test3/test3.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        rgb: {
            r: 0,
            g: 0,
            b: 0
        },
        fullColor: '0,0,0'
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changeR: function () {
            this.setData({
                'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
            })
        },
        changeG: function () {
            this.setData({
                'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
            })
        },
        changeB: function () {
            this.setData({
                'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
            })
        }
    },

    observers:{
        // 监听 rgb对象的所有属性的setData
        'rgb.**':function(obj){
            this.setData({
                fullColor:`${obj.r},${obj.g},${obj.b}`
            })
        }
    }
})

全局配置引用组件:

{
  "usingComponents": {
      "my-test3":"/components/test3/test3"
  },
}

页面使用组件及效果:

<my-test3>my-test3>

组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听_第7张图片


你可能感兴趣的:(微信小程序,前端,微信小程序)