微信小程序精通到入门---06 组件

微信小程序精通到入门---06 组件

一、组件基本使用

1、组件基本使用

1） 新建一个一级目录components，并且右键创建一个component组件

2） 组件注册

在.json文件进行注册，app.json是全局注册

  "usingComponents": {
    "top": "/components/top/top",
    "baseTable": "/components/table/baseTable",
    "base": "/components/base/base",
    "count": "/components/count/count"
  },

3） 组件的js

组件的js主要是通过properties接收父页面或父组件的参数，可以通过this.data.获取，页面可以使用模板语法{ {}}，通过ready()函数，是组件加载时的钩子函数。 组件内可以通过<slot>插槽接收组件标签的内容。案例如下：

Component({

  externalClasses:['myclass'],  
  // 外部样式  组件内引用 <view class="myclass">  组件使用：<top myclass='custom_class'>
  options: {multipleSlots: true },
  // 是否使用多slot
  
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:'top'
    }
  },

wxml:  (myclass 是外部传入的样式，即在页面编写组件时使用 myclass="自定义样式"，这个样式会传递给组件内部使用)

<view class="top_nav">
    <view class="tit_ myclass">
      <i>.</i>
      {
  {title}}
      <i>.</i>
      <slot/> 
    </view>
</view>

wxss:

.top_nav{
  height: 85rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  background: #2793da;
  line-height: 100%;
  text-align: center;
}
.top_nav .tit_{
  line-height: 85rpx;
  height: 85rpx;
  width: 100%;
  color: #fff;
}

4） 页面使用组件

新建一个comp页面，用来演示组件的使用