自定义组件的基础知识【认识自定义组件以及父（页面）子（组件）传值】

1. 创建自定义组件：类似于页面,一个自定义组件由json、wxml、wxss、js 4个文件编写。

• 要编写一个自定义组件，首先需要在自定义组件的json文件里设置

{
    “component”:true
}

• 在自定义组件的wxml里面进行自定义组件wxml的编写

<!--<slot></slot>为页面中，在自定义组件标签内编写的内容 -->
<view class="first-test">
  <view>
    这是组件slot中的内容
  </view>
  <slot></slot>
  <view>slot的下面的内容</view>
</view>

• 在自定义组件的js/ts中进行页面给组件的传值的接收（父子传值）

export default Component({
//properties接收参数
    properties:{
//data--->父组件传值时里面定义的data
        data:{
             type：Object,  //父组件传来的类型
             //observe实现监听的效果
                observer:function(newVal){
                    console.log("newVal",newVal)
                     if(newVal){
                        //在这里就可以给data里的数据赋值了
                        this.setData({})
                          }
                      }
               }
       }
//数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。
 
//使用通配符**可以监听全部setData。
    observers:{
    '**':function(){
     //每次setData都能触发
        }

2. 页面中

• 在页面的json文件中引入自定义组件

/*
"my-component"-->自定义组件名
"/src/pages/components/firsy-test":路径
*/
{
    "usingComponents":{
        "my-component":"/src/pages/components/firsy-test"
    }
}

• 在页面的wxml文件中使用自定义标签名进行自定义组件的使用

<!--   formaData：父组件传给子组件的数据 (父组件的js定义的数据)
       data:子组件来接收父组件数据的变量名
 -->
<view class="custom-page">
  CustomComponents
  <view>
    <view>这是组件内部的节点</view>
    <my-compoent data="{{formaData}}">
        <view>组件内slot所对应的值</view>
    </my-compoent>
  </view>
</view>

• 页面中的js/ts定义的数据

data:{
    formData:{
        
    }
}