小程式中Component元件怎麼使用？以下這篇文章跟大家分享一下小程式自訂元件Component超全實用指南，希望對大家有幫助！
在小程式中，想要將頁面內的功能模組抽像出來，在不同的頁面中重複使用，我們可以使用它的自訂元件，自訂元件可以將複雜的頁面拆分成多個低耦合的模組，這不僅使用起來方便，而且還有助於我們的程式碼維護。 【相關學習推薦：小程式開發教學】
本文你將收穫
為什麼要刻意說這一步呢？
不知道有沒有小夥伴們和我一樣一直只把小程式開發工具當預覽工具用，然後開發是用其他編輯器的。
{
"component": true
}引入元件方法
json 檔案中進行引用宣告
<!-- 引用组件的json文件 -->
{
"usingComponents": {
"x-title": "/components/title/title"
}
}wxml 中像使用基礎元件一樣使用自訂元件（名字和宣告的保持一致）
<!-- 引用组件的wxml文件 --> <x-title></x-title>
父級給子級傳值
<!-- 父级wxml -->
<x-title titleText="全部订单"></x-title>
<!-- 如果父级的值是一个变量则 -->
<x-title titleText="{{currentTitle}}"></x-title>子級接收父級傳過來的值
<!-- 子级js -->
properties: {
titleText:{
type:String,
value:'其他'
}
},子元件向父元件傳參
<!-- 子级wxml --> <view class="title-oper" bindtap="gotoDetail">详情</view>
<!-- 子级js -->
gotoDetail(){
this.triggerEvent('gotoDetail',this.data.titleId)
}父元件接收子元件的參數
<!-- 父级 wxml -->
<x-title titleText="{{item.title}}"
titleId="{{item.id}}"
bind:gotoDetail="gotoDetail"></x-title><!-- 父级 js -->
//通过e.detail获取子组件传过来的参数
gotoDetail(e){
const id = e.detail
console.log('从子组件接收到的id',id)
}
<!-- 子级 js -->
childMethod(){
console.log('我是子组件的方法')
},<!-- 父级 wxml --> <x-title id="titleCom"></x-title> <van-button type="primary" bindtap="triggerChildMethod">调用子组件方法</van-button>
<!-- 父级 js -->
onReady(){
this.titleCom = this.selectComponent("#titleCom");
},
triggerChildMethod(){
this.titleCom.childMethod();
}如果this.selectComponent()返回为null
1、检查wxml定义的id和js使用的是否一致；
2、自定义组件是否渲染，例如你使用了wx:if，导致组件还未渲染
传值官网相关文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
我们上面在自定义组件中加了【详情】查看的操作按钮，但是有的地方我们可能并不想用文字，想改成图标或者按钮，当某处放置的节点内容不确定时，我们就可以使用插槽来处理。
插槽就相当于在子组件中放一个占位符，这样父组件就可以向子组件填充html了。
在子组件加入插槽
<!-- 子级 wxml --> <slot></slot>
父级即可在组件内任意填充内容，比如插入一个图标（如果子级没有加slot，及时填充了html也不会被渲染）
<!-- 父级 wxml -->
<x-title>
<view class="oper-wrap">
<van-icon name="arrow" />
</view>
</x-title>先在子组件的js开启一下多slot支持
<!-- 子级 js -->
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},在子组件加上插槽需要给插槽加上名字
<!-- 子级 wxml --> <slot name="icon"></slot> <slot name="oper"></slot>
在父级使用
<!-- 父级 wxml -->
<view class="icon-wrap" slot="icon">
<van-icon name="orders-o" size="24"/>
</view>
<view class="oper-wrap" slot="oper">
<van-button type="primary" custom-style="{{customStyle}}">更多</van-button>
</view>问：为什么加了插槽，却没有反应？
虽然我只在【子组件】加了1个插槽，但是因为加上了名字，所以同样需要在【子组件】的js里开启多插槽
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},插槽官网文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
//组件所在页面的生命周期
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})生命周期官网：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
更多编程相关知识，请访问：编程视频！！
以上是小程式中Component元件怎麼使用？實用指南分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
