03小程序自定义组件

1.组件化开发步骤

​ 在需要引入组件的页面文件下的json格式中添加component字段 ， 值为true`

{
    "component":true,
    "usingComponents":{
      "nav-dfs":"components/hello/hello"
}
}

2.自定义组件的细节

1.组件内不能使用类选择器以外的选择器。

2.自定义的组件标签名最好只是 小写字母、中划线、下划线的组合，且命名不能以WX-开头。

3.组件的样式细节

组件内的类样式与组件外的类样式，默认是有一个隔离的效果。（类似沙盒模式）。

3.1 组件内的样式对外部样式的影响

​ （1）组件内的样式默认只在组件内生效，对引用组件的Page页面不生效。

​ （2）组件内不能使用ID选择器，属性选择器，标签选择器。

3.2 外部样式对组件内样式的影响

组件外部只有使用 标签选择器 才会对组件内的样式造成影响，ID选择器和类选择器不会对组件内的样式造成影响。

3.3 如何让组件的class与组件外的class可以互相影响

在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性。 styleIsolation有三个取值：

​ （1）- isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值）；

​ （2）- apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；

（3） - shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 了

 Component({
     options:{
         stylelsolation:isolated  //默认值 互相隔离
         stylelsolation:apply-shared  //外部的样式可以影响到自定义组件，而自定义组件的样式无法影响到外面
         stylelsolation:shared  //互相影响，外部的样式可以影响到组件，组件中的样式也可以影响到外部样式
         
     }
 })

4. 向组件传递数据

在Component对象中，有个properties属性用来向组件传递数据。（有点类似Vue的 props)

Component({
    options:{ stylelsolation:isolated},//样式隔离
    properies的定义的类型不限制，可以是String、Number、Boolean、Object、Array、Null等等
    properies:{  //properies有两种定义方式
        myProperty：String,// 方式1：简化版本 不推荐
        myProperty1：{ //方式2：
			type:Number, //type :传递的数据格式
        	value：0， // value:当外部没有数据传进组件中时默认显示的数据
    		_propertyChange: function(newVal, oldVal) {
                      console.log(newVal,oldVal)
				}
		}
})