微信小程序开发六（自定义组件）

自定义组件的创建：

      如何创建：

    

    

    

    

     右键选择新建component

    

       创建完成之后需要打开app.json，这是全局使用这个组件，想要单独的页面使用，就在当前页面的json文件中定义

"usingComponents": {
    "my-zj": "./components/test/test"
  }

 如何使用：打开任意页面的wxml页面

      

<my-zj></my-zj>

插槽的作用：页面可以向组件传入信息

组件插槽的使用：

     定义插槽：wxml页面

   

<slot name="one"></slot>

     页面如何传入内容

<my-zj>
  <view slot="one">插槽的内容</view>
</my-zj>

      需要注意： 默认插槽每个组件只能使用一个，开启多个插槽需要在js文件中设置options:{}在这个里面开启

     组件js页面开启多个插槽：

options:{
    //   开启多个插槽
    multipleSlots:true
 }

     组件的wxml页面：

<slot name="one"></slot>
  <slot name="two"></slot>

     页面的wxml内容：

    多个插槽如何区分的： 单个插槽不需要定义名称

 组件接收页面传来的值：

      在页面的js文件中定义一个count变量，赋值101

  count:101

  页面wxml页面上传值：

<my-zj count="{{count}}" id="idChli">
  <view slot="one">插槽的内容</view>
  <view slot="two">第二个插槽的内容</view>
</my-zj>

   组件如何接收变量值：

       组件js文件：

properties: {
     count:Number
  },

    定义一个方法每次点击就加五

 methods: {
      add(){
        this.setData({
            count:this.properties.count+5
        });     
      }
  }

       wxml页面：

<view>{{count}}</view>
  <button bindtap="add" type="primary">n+1</button>

    这样就可以获取页面传过来的内容了

   页面如何接收组件传过来的参数呢？

        组件js文件：

methods: {
      add(){
        this.setData({
            count:this.properties.count+5
        });   
        // 从这里就能获取得到父组件中的方法内容并且传递内容   
        this.triggerEvent("md",{value:this.properties.count});  
      }
  }

       页面wxml文件：

<my-zj count="{{count}}" id="idChli" bind:md="md">
  <view slot="one">插槽的内容</view>
  <view slot="two">第二个插槽的内容</view>
</my-zj>

     页面js进行接收

 md(e){
    //console.log(e);
    // 通过方法中参数得到数据传输 
    this.setData({
        count:e.detail.value
    });
},

    如何在页面使用组件中的方法：

getChil(){
  var child = this.selectComponent("#idChli");
  child.add();
},

    

<my-zj count="{{count}}" id="idChli" bind:updateDa="md">
  <view slot="one">插槽的内容</view>
  <view slot="two">第二个插槽的内容</view>
</my-zj>
<view class="mes">父组件中的count值：{{count}}</view>
<button type="primary" bindtap="getChil">父获取子值</button>