小程序组件

组件

• 什么是组件？

  组件就是将一个功能进行封装,组件是视图层的基本组成单元,有自己独特的功能

• 组件的规范

  结构
    样式
    逻辑
    通信方式
    生命周期
    可组合(可以嵌套)
    定义组件
    调用组件(标签的形式)

• 组件的创建

  小程序中组件由4个文件组成:
    .json  .wxml  .wxss  .js
    
    创建组件实例需要通过Component(Object)函数创建
    创建组件需要在组件的json文件中定义component:true字段指定为一个组件
    
    组件中能够的基础选项：
        
        Properties:接收的数据
        Data:内部数据
        Methods:处理函数
        
    使用组件：
        
        需要在对应的页面或者组件的json文件中定义usingComponents:{}选项
        
        usingComponents:{
            '名-称':'组件路径'
        }
        
        在页面中可以使用 <名-称/>
        名称中不能出现大写字母,规则就是(字_-)
        
    组件的组合可以使用slot插槽来完成，和Vue一样,只不过没有作用域插槽,可以有命名插槽和默认插槽
    
    组件的通信可以通过props传递参数(父子),自定义事件(子父)
        1)父子<my-component test='sss'/>
        2)子父 <my-component bindtest='testFn'/> 组件内部通过this.triggerEvent('test',{detail:对象})

WXS（WeiXin Script）是小程序的一套脚本语言

wxs中index.wxs中写入js代码
    
    var msg = "hello world";
    module.exports.message = msg;

需要用的页面中引入

    <wxs src="../wxs/index.wxs" module="m1" />
    <view>{{m1.message}}</view>

组件

// index页面

<nav-bar bindselect='navselect' class='navbar' test='aaa'/>

// index.js
 navselect(res){
    console.log(res)
  },
 
// navbar.js中的改变数据之后

this.setData({
    ind: e.target.dataset.id
  },()=>{
    this.triggerEvent('select',{
      ind: e.target.dataset.id
    })
  })

// index.json

    {
      "usingComponents":{
        "nav-bar":"../components/navbar/navbar"
      }
    }

传递数据

父子: properties
子父:triggerEvent

数据data改变

vue  watch监听
react setState的回调函数
小程序  setData的回调函数