day05

创建组件

在项目中创建一个和pages同级的文件夹用来存放我们组件

components---->新建文件夹 mycom--->myCom文件夹右击新建component 输入组件的名称回车自动生成4个文件

引入组件

组件可以在每个小程序页面中使用

多个页面都会用到该组件使用

全局组件在app.json中进行注册

"usingComponents":{
     "my-com":"/components/myCom/myCom"
}

“组件名称“：”组件的路径“

在页面中通过组件名称的标签就可以调用组件

组件和页面的区别

组件

都拥有4个文件  .js  .wxml  .wxss  .json

组件的json文件中需要声明 "component": true,

组件的 .js文件中调用Component() 函数

组件的事件处理函数需要定义到methods中

页面

页面的 .js中调用 Page()方法

样式

一般情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的ui结构

• 组件myCom的样式不会影响组件myText

• 组件myCom的样式不会影响小程序页面

• 小程序页面的样式不会影响组件myCom和组件myText

app.wxss中的全局样式对组件无效

只有class选择器有样式隔离的影响，id，标签，属性选择器不受样式隔离的影响

建议使用class选择器

properties

父传子

properties是组件的对外属性，用来接收外界传递给组件中的数据

//父组件
<my-com tit="2202A大哥们好" num="{{20}}"></my-com> 
  properties: {
    tit:{
      type:String,   //数据类型
      value:'hello'   //默认值
    },
    num:Number
  },

properties和data的区别

• 小程序的组件中，properties属性和data属性用法相同，都是可读可写的但是：

  • data更倾向于存储组件的私有数据

  • properties 存储外界传递给组件的私有数据

methods: {
    addCount(){
      console.log(this.data)   //{count: 0, tit: "2202A大哥们好", num: 20}
      console.log(this.properties)
      // 本质上一样的，都是可读可写的
      console.log(this.properties===this.data)   //true
    }
 }
​

使用setData修改properties的值

this.setData({
          num:this.properties.num+2
})

数据监听器

监听和响应任何属性和数据字段的变化，从而执行特定的操作

Component({
    observers:{
        '字段A，字段B'：function(字段A的新值，字段B的新值){
            //代码
        }
    }
})

代码

<view class="box">
    <view>{{n1}}+{{n2}}={{sum}}</view>
    <button bindtap="addN1">n1+1</button>
    <button bindtap="addN2">n2+1</button>
</view>

Component({
  /**
   * 组件的初始数据
   */
  data: {
    n1:0,
    n2:0,
    sum:0
  },
​
  observers:{
    'n1,n2':function(newN1,newN2){
      this.setData({
        sum:newN1+newN2
      })
    }
  },
​
  /**
   * 组件的方法列表
   */
  methods: {
    addN1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
    addN2(){
      this.setData({
        n2:this.data.n2+1
      })
    }
  }
})
​

监听对象属性的变化

支持监听对象中单个或多个属性的变化

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})