原生微信小程序组件化流程

一、创建components文件夹

二、组件中是通过Component构造函数定义的

• properties： 对外属性，即如果外部的wxml文件传入数据时，会把数据设置成properties的属性（接收父组件传递的数据）
• data： 这里的data和页面中的data是一致的，但是这里的data只在组件内部使用。
• methods： 组件中的方法都是在这个对象里定义（可以接收父组件传递的事件）
• options： 组件配置项

options:{ 
    // 样式隔离：isolated相互隔离(默认)；apply-shared父影响子；shared父子相互影响
    styleIsolation: "isolated",
    multipleSlots: true,
    // 当class与页面class冲突不生效时，配置当前属性
    addGlobalClass: true
}

三、父组件引入子组件

1. 页面中JSON文件配置引入子组件

{
  "usingComponents": {
    "login-popUp": "/component/loginPopup/index"
  }
}

2. wxml文件中使用

<login-popUp></login-popUp>

3. 父组件向子组件传值

<login-popUp isShowLogin="{{isShowLogin}}"></login-popUp>

// 子组件在properties中接收
properties: {
    isShowLogin: {
      type: Boolean,
      value: false
    }
},

4. 父组件向子组件传递事件

<login-popUp bindlogin="closeShow"></login-popUp>

// 子组件定义个方法触发该事件
methods: {
    // 关闭弹窗
    onTap: function(){
      this.triggerEvent("closeShow")
    }
}

5. 插槽的使用

// 子组件
<slot></slot>

// 父组件在组件内写html代码
<login-popUp>
    <view>这里使用插槽</view>
</login-popUp>