小程序自定义组件

@小程序自定义组件

小程序自定义组件的使用

关于小程序自定义组件的使用介绍，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

如何创建自定义组件

• 在微信开发者工具先创建一个空的文件夹
• 然后在文件夹点击component，输入新创建的组件名称，不能以wx为开头这里以my-cpn为第一个自定义组件
• 打开my-cpn.json文件可以看见

{
  "component": true,
  "usingComponents": {}
}

必须要有component：true才是一个自定义组件

• 创建出来需要注册组件
• 注册：去全局json文件或者需要引用组件的json文件注册组件
• 全局注册可以在每个每个页面进行调用自定义组件标签
• 在页面内注册，只可以在当前页面进行调用
  -下面是在json文件注册的代码，

{
  "usingComponents": {
    "my-cpn":"/compents/my-cpn/my-cpn"
    //my-cpn是标签名，后面可以是相对路径或者绝对路径
  }
}

• 最后就可以在页面中使用自定义组件的标签

组件跟页面之间的通信

• 页面传递给自定义组件数据，先找到组件的js文件

  properties: {
  //在properties传递的是数据，可以是数组或者对象
    title:{
      type:String,
      value:"我是默认的标题"
    }
  },
  //externalClasses传递的是样式
  externalClasses:['titles'],

然后再去组件的wxml文件进行引用

<view class="titles">{{title}}</view>

• 最后去页面的标签里面传递刚刚定义的属性进行传值
• 这样可以将我们所需要的标题或者样式传递进去，不需要在每个文件写死

<my-cpn title="嘿嘿我是自定义组件的数据"  titles="red" />
<view>{{counter}}</view>
<my-cpn titles="blue" bindinremnt="inrement" ></my-cpn>

样式在对应的页面wxss里面

.red{
  background-color: red;
}
.blue{
  background-color: blue;
}

组件传递给页面数据

1.首先在my-cpn.wxml里面进行事件监听

<button  bindtap="counter">+1</button>

1. 然后去组件的js文件找到methods

 methods: {
 counter(){
  this.triggerEvent('inremnt',{name:'hjf'},{})
  //inremnt是传递过去页面的事件，name是传递过去的数据
 }
  }

在页面可以监听到自定义事件的发送

<my-cpn titles="blue" bindinremnt="inrement" ></my-cpn>

可以去页面的js文件进行相关事件的监听

inrement(event){
 console.log(event)
 //监听传递过来的数据在event.detail里面
  }

如果有帮助到你，请给我点赞一下，谢谢