image.png

1 在根目录 创建components 组件的文件夹

再创建单独组件的文件夹 demo ==> 右键点击该文件夹demo 提示新建 components文件,文件名称跟 demo文件夹 一样 即可
image.png

2 使用 自已定义的组件

在当前页面的 json 文件中引入 

  1. "usingComponents": {
  2.     "fankuai":"/components/fankuai/fankuai"
  3. },

3 调用组件 即可

  1. <fankuai></fankuai>

自定义组件的添加属性

1首先在 js 中的 properties: { } 定义你的组件属性,
2在组件的文件夹的wxml 写入这个{{你定义的属性名称 }}
3在使用 自定义组件标签的 写进属性和赋值
可以设置行内样式 ,还有变量的,应用场景 再看看,这个肯定应用范围很广
image.png
image.png
image.png

自定义组件中卡槽slot添加其它组件slot

类似vue中插槽
设置结构: 首先在组件上定义卡槽的结构最里面是 slot 标签,然后给这个slot 标签 添加属性 name
调用卡槽: 在组件标签里书写 view标签 并添加 卡槽属性 slot 并指定卡槽的位置 slot=”left”
1 在当前的文件夹 新建页面.名称跟文件夹相同
2 新建好之后去 js文件中 的 “ 组件的属性列表” 这里添加
注意: 卡槽slot 需要在 组件标签内 使用,才有效
在那个文件夹定义插槽的就在自身的 文件夹的js 中添加 多个插槽的命令为 true 

  1. Component({
  2. /**
  3. * 组件的属性列表
  4. */
  5. options:{
  6.     multipleSlots:true
  7. },
  9. Component({
  10.   Options:{
  11.   Multipleslots:true
  12.   }
  13. })

3 这会就可以在 wxml 中书写定义 slot 卡槽了和 wxss样式
多个卡槽的话,给每个卡槽都定义唯一的name 名称

  1. <view class="container">
  2.   <view class="header">这是头部部分</view>
  3.   <view class="body">
  4.     <view class="left-group">
  5.       <slot name="left"></slot>
  6.     </view>
  7.     <view class="right-group">
  8.       <slot name="right"></slot>
  9.     </view>
  10.   </view>
  11. </view>

4 使用
也是跟自定义组件那样使用, 注册组件,使用组件 ,在组件的标签内使用 slot属性 并填写 属性值,也就是定义卡槽的name名称

  2. <fankuai>
  3.   <view slot="left">这是body部分左</view>
  4.   <view slot="right">这是body部分右</view>
  5. </fankuai>

注意:组件内的样式 统一 使用.class 来设置样式, 使用其他选择器的,会产生非预期的表现

自定义组件中事件监听

自定义事件监听及传到被注册的组件事件中触发自定义监听事件, 类似 父组件监听子组件 点击事件

首先监听的结构父组件
image.png
子组件的结构
image.png

从子组件监听到的事件 发送给父组件(自定义监听事件)
this.triggerEvent()
注意 子组件的监听函数事件必须放在methods:{} 中使用
image.png
image.png
image.png

在父组件中的 js 书写 监听事件的函数名
image.png