小程序 组件 Component

一.组件模板和样式

相似于页面，自定义组件拥有本身的 wxml 和模板 wxss 样式。

   1.组件模板

组件的写法和页面的写法相同，组件模板与组件数据结合后生成的数节点，

将被插入到组件的引用位置。在组件模板中提供一个<slot> 节点，用于承载组件

引用时候提供的子节点。

例如：

　　　　<view class="wrapper">
  　　　　<view>这里是组件的内部节点</view>
 　　　　 <slot></slot>
　　　　</view>

  引用在页面的.json 文件中配置。

　　"usingComponents": { 　　"v-component": "/components/cs/cs" 　}

  "v-component" :为自定义的模板名字，页面引用的时候用，

  "/components/cs/cs"  引用组件的路径

页面中引用 以下：

　　　　<v-component>
  　　　　<view>这里是插入到组件slot中的内容</view>
　　　　</v-component>

2.组件中的模板数据绑定

与普通的模板数据绑定相同，动态像子组件传递数据。

例如：

　　<v-component  prop-a="{{dataA}}" prop-b="{{dataB}}">
  　　<view>这里是插入到组件slot中的内容</view>
　　</v-component>

组件接收到页面传递过来的数据，页面能够经过setData 来改变绑定的绑定字段。

（目前只能传递JSON数据）

 3.组件的wxml 的slot

默认状况下，一个组件的wxml 中只能有一个slot,须要使用多个slot 时，能够在组件js

声明启用。

　　　　Component({ 　　　　　　options:{ 　　　　　　multipleSlots: true // 在组件定义的选项中启用多slot 支持
 　　　　}， 　　　properties:{}, 　　　　　　methods:{} 　　　　})

此时在组件就能够启用多个slot,以不一样的name 来区分。

  例如：

　　 <view class="wrapper">
　　　　　　<slot name=“head”></slot>
   　　　　　　<view>这里是组件的内部节点</view>
   　　　　<slot name="footer"></slot>
 　　</view>

   在使用的时候

　　　　<v-component >
  　　　　 　<view slot="head">slot中的头部内容</view>
        　　<view slot="footer">slot中的底部内容</view>
　　　　</v-component>

4.组件样式

组件对应wxss 文件的样式，只对组件wxml 内的节点生效。编写组件样式时注意：

(1) 组件和引用的页面，不能使用id选择器，(#a),属性选择器（[a]）和标签名属性

 选择器，请改用class 选择器。

(2) 组件和引用组件的页面中使用后代选择器(.a .b) 在极端状况下会有非预期的表现。

(3)子元素选择器(.a>.b) 只能用于view 组件与其子节点之间，用于其余组件能够能致使

   非预期的状况。

(4)继承样式，如font , color 会从外部组件继承到组件内。

(5)除继承样式外，app.wxss 中的样式，组件所在页面中的样式对自定义样式无效。

（6）组件能够指定节点的默认样式 :host{color:yellow;}

 

5.外部样式

组件接收外部传入的样式类，能够在Component 中用externalClasses 定义若干个外部样式

类，这个特性能够用实现相似于，view 组件的 hover-class属性，页面能够提供一个样式类

赋予 view 的hover-class 这个同样式类写在页面中，而非， view 组件的实现中。

 例如：

/* 组件 custom-component.js */

　　　　Component({ 　　　　　　externalClasses:['my-class'] 　　　　}) <!-- 组件 custom-component.wxml -->

　　　　<v-component class="my-class" >

   这段文本的颜色由外部组建的 class 以为

</v-component>

组件的使用或者能够指定这个样式类对应的class, 就像使用普通属性样式同样

页面的WXML

　　　　<v-component  my-class="red-text"></v-component>
 　　　　　　.red-text{ 　　　　　　　　color:red; 　　　　　　}

 6.使用组件接收全局样式

  默认状况下，自定义组件的样式只受到wxss 的影响

(1) app.wxss 中使用了标签名选择器，影响到页面和所有组件，

(2) 在自定义的组件中激活了 addGlobalClass 选项，这样使自定义

组件能被app.wxss 或页面的wxss 中的全部样式。

 要激活 addGlobalClass 选项，只需在Component 构造中将 options.addGlobalClass

  字段为true (当激活了 addGlobalClass 选项后，存在外部样式污染样式组件的风险)

 /* 组件 custom-component.js */ Component({ options: {     addGlobalClass: true,   }   })

 /* 组件 custom-component.wxml  */

　　　　<text class="red-text"> 　　　　　　这段文字颜色由 `app.wxss`和页面`wxss` 中的样式定义来规定 　　　　</text>

　　　　/*app.wxxs*/ 　　　　.red-text{ 　　　　　　color:red; 　　　　}