小程序component组件

简介

1.自定义组件搭建
2.组件内部方法
3.父子传参
4.slot

搭建并引入components

##新建components文件夹
##components文件夹里新建组件文件夹(右击components文件夹新建components)，会自动产生四个文件，同新建普通页面一样，新建components的话，四个文件自动产生内容与普通文件夹略有不同

image.png

wxss页面定义wxml里面的样式不多说

##wxml
<view>
  <!--使用组件中的content属性-->    
  <view >儿子</view>
  <!--使用组件中的methods-->
</view>

##js
Component({
  //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
  properties: {
    content: {
      type: String,
      value: ''
    }
  },
  // 私有数据，可用于模版渲染
  data: {
  },
  // 组件的方法列表
  methods: {
 
  }
})

##json  注意 json中不可以写注释，会报错
{
  "component": true, 
  "usingComponents": {} 
}

组件搭好了，1.在需要用到组件的json页面直接引入

##myItem就是组件名，跟自带组件一样的写
{
  "usingComponents": {
    "myItem": "/components/item/console"
  }
}

2.在需要用到组件的json页面直接引入

##wxml
 <!-- 自定义组件 -->
  <view>
    <myItem></myItem>
  </view>

到此！引用组件的页面就会显示‘儿子’，简单引用组件完成，下面介绍处理方法

组件内部方法定义（wxml写绑定事件，js的methods里面写方法）

##wxml
<view>
  <!--使用组件中的methods-->
  <view>
    <button size='mini' catchtap='clickMe' class='btn'>cilck here</button>
  </view>
</view>

##js
Component({
  //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
  properties: {
    content: {
      type: String,
      value: ''
    }
  },
  // 组件的方法列表
  methods: {
    clickMe: function () {                // 根据需求定义事件
      console.log("you have clicked me");
    }
  }
})

到此！在引入组件的文件中点击这个按钮就可以操作到myItem组件的事件咯～

参数父传子模拟

##console.wxml
 <view >{{content}}</view>

##console.js properties里定义content
Component({
 //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
 properties: {
   content: {
     type: String,
     value: ''
   }
 },
 // 私有数据，可用于模版渲染
 data: {
 },
 // 组件的方法列表
 methods: {
   clickMe: function () {                // 根据需求定义事件
     console.log("you have clicked me");
   }
 }
})

##父亲wxml
  <view>
    <myItem catchtap="clickItem" content="{{chuancan}}" >
    </myItem>
  </view>

##父亲 js
Page({
  data: {
    show1:false,
    focus:false,
    chatNews:[],
    chuancan:'儿子你好', //这里改变content值，可以看到儿子里的{{content}}内容会变成父亲这里的参数
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      chatNews: dataBase.data
    })
  }
})

子向父传参

##父亲用myevent（可以随便写名字）给子组件发射，然后绑定一个父组件函数接受myevent带过来的参数
 <view>
    <myItem catchtap="clickItem" content="{{chuancan}}" bind:myevent="onMyEvent" >
<text>{{ctof}}</text>
  </view>

##子组件wxml
<view>
    <button size='mini' catchtap='clickMe' class='btn'>cilck here</button>
</view>

##父亲js
Page({
data:{
ctof:111
},
//e.detail接收
onMyEvent:function(e){
    this.setData({
      ctof: e.detail.ctof
    })
  },
})

##子组件js
Compionent({
methods: {
    clickMe: function () {    
//使用 triggerEvent 方法，指定事件名、detail对象和事件选项
      this.triggerEvent('myevent', { ctof: 123 });
    }
  }
})

这样，当你点击子组件的button按钮时，父组件的111就会改成123了

slot

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

Component({
  //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
  properties: {
    content: {
      type: String,
      value: ''
    }
  },
  options: {
    multipleSlots: true     // 启用多slot支持
  },

  // 私有数据，可用于模版渲染
  data: {
  },
  // 组件的方法列表
  methods: {
    
  }
})

##子组件
<view>
  <!--使用组件中的content属性-->    
  <!--给conent一个值hello, hello会传递到item.js中的content属性中, 然后使用{{}}把它取出来 -->
  <view >{{content}}  word</view>
  <slot name="one"></slot>
  <slot name="two"></slot>
</view>

##父组件
<view>
    <myItem catchtap="clickItem" content="{{chuancan}}" bind:myevent="onMyEvent" >
      <icon slot="one" type='success'></icon>
      <view slot="one">插入到组件slot name="one"中的内容</view>
      <text slot="two">插入到组件slot name="two"中的内容</text>
    </myItem>
  </view>

此时，父组件的‘插入。。。’就会显示在子组件的<slot>里