小程序组件

组件

什么是组件？

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

组件的规范

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

组件的创建

小程序中组件由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的回调函数