?? ?????? ????? ??? ?????? ?? ????? ?? ????? ??? ?? ?? ??? ?? ????? ???? ???? ??? ????. ? ???? ??? ??? ????.

?? ?????? ??? ?? ?? ??? ????? ?? ????? ?????? ??? ???? ?? ?? ?? ?? ??? ??? ? ?? ??? ?? ?? ??? ??? ? ????. ???? ??? ?? ??? ?? ?? ???? ??? ???. [?? ?? ?? ??: ?? ???? ?? ????]???

? ???? ?? ???

?? ?????? ??? ?? ?? ??? ???? ??
??? ?? ?? ?? ?? ??? ? ??
??? ?? ?????? ?? ??

Demining, ? ?? ?? ????? WeChat ?? ????? ?????(?, ?? ?? ????? ????? ???? ???)
Demining, ? ?? ?? ?? ??? ?? ?? ??? ?? ????. ?? ??? ????? ??? ???? ?? ??? ??? ???? ?? ????!
?? ??(?? ??)

? ?? ??

?? ?? ????? ??? ?? ?? ??? ??? ????(?? ??? ???? ??? ?????)

? ?? ?? ??

?? ?? ?? ???? ???? ??? ??? ???? ???? ? ?? ??? ????.

? ??? ????? ???? ?? ??? ??????

??? ?? ???? ?? ??? ???? ??? ???? ?? ???? ???? ???? ??? ??? ??????.

?? ?????? ?? ?? ??? ???? ???? ? ?? 4?? ??? ?? ???? ??? ???? ????? ?? ??? ???? ??? ??? ???? ? ??? ?? ?? ????.

?? ?? ??

?? ??? ?? ?? ??? ??? ?? ??? ???? ??? ????????(???? ??)

??? ????? ??? ??????

??? ???? ?? ? ?? ?? ?? [? ???? ??]? ???? ???. ???? ???? ???? json ??? ???? ?? ?? ???(?? ???? ?? ??? ????? ???? ????)

{
  "component": true
}

???? ??? ??

???? json ???? ?? ?? ???

<!-- 引用組件的json文件 -->
{
  "usingComponents": {
    "x-title": "/components/title/title"
  }
}

???? wxml?? ??? ???? ?? ?? ?? ??(??? ??? ???? ???) json 文件中進(jìn)行引用聲明

<!-- 引用組件的wxml文件 -->
<x-title></x-title>

在頁面的 wxml

<!-- 父級wxml -->
<x-title titleText="全部訂單"></x-title>

<!-- 如果父級的值是一個變量則 -->
<x-title titleText="{{currentTitle}}"></x-title>

?? ???? ??? ??????

?? ????? ?? ????? ?? ?????.

?? ?? ??? ?? ?? ?? ? ? ??? ??? ????? ???? ?? ?? ??? ??? ???? ??? ??? ?????. ???? ?? ??? ???? ????.

??? ???? ?? ?????

<!-- 子級js -->
properties: {
        titleText:{
            type:String,
            value:&#39;其他&#39;
        }
    },

??? ??? ??? ?? ????

<!-- 子級wxml -->
 <view class="title-oper" bindtap="gotoDetail">詳情</view>

?? ?? ??? ?? ?? ??? ?? ?????

?? ??? ?? ???? ?????. ?? ?? ?? ?? ?? ??? ?? ?? ??? ?????. ?? ?? ??? ??? ? ?? ??? ID? ?? ??? ???? ????.

?? ?? ??? ?? ?? ??? ?? ??? ?????.

<!-- 子級js -->
 gotoDetail(){
    this.triggerEvent(&#39;gotoDetail&#39;,this.data.titleId)
 }

<!-- 父級 wxml -->
<x-title titleText="{{item.title}}"
             titleId="{{item.id}}"
             bind:gotoDetail="gotoDetail"></x-title>

?? ?? ??? ?? ?? ??? ?? ??? ????.

<!-- 父級 js -->
 //通過e.detail獲取子組件傳過來的參數(shù)
gotoDetail(e){ 
    const id = e.detail 
    console.log(&#39;從子組件接收到的id&#39;,id)
  }

<!-- 子級 js -->
childMethod(){
    console.log(&#39;我是子組件的方法&#39;)
 },

??? ?? ?? ??? ???? ??

?? ?? ???

<!-- 父級 wxml -->
<x-title id="titleCom"></x-title>

<van-button type="primary" bindtap="triggerChildMethod">調(diào)用子組件方法</van-button>

???? ?????. ??? ?? ?? ?? ??? ID? ?????

<!-- 父級 js -->
 onReady(){
    this.titleCom = this.selectComponent("#titleCom");
  },
  
triggerChildMethod(){
    this.titleCom.childMethod();
  }

js ???? ??? ????? ?? ??? ??? ?? ?? ??? ?? ?? titleCom? ???? ?? ?????. ?? ?? ??? ???

<!-- 父級 js -->
 onReady(){
    this.titleCom = this.selectComponent("#titleCom");
  },
  
triggerChildMethod(){
    this.titleCom.childMethod();
  }

如果this.selectComponent()返回為null

1、檢查wxml定義的id和js使用的是否一致；

2、自定義組件是否渲染，例如你使用了wx:if，導(dǎo)致組件還未渲染

傳值官網(wǎng)相關(guān)文檔：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

在自定義組件中使用插槽（slot）

我們上面在自定義組件中加了【詳情】查看的操作按鈕，但是有的地方我們可能并不想用文字，想改成圖標(biāo)或者按鈕，當(dāng)某處放置的節(jié)點(diǎn)內(nèi)容不確定時，我們就可以使用插槽來處理。

插槽就相當(dāng)于在子組件中放一個占位符，這樣父組件就可以向子組件填充html了。

單插槽

在子組件加入插槽

<!-- 子級 wxml -->
 <slot></slot>

父級即可在組件內(nèi)任意填充內(nèi)容，比如插入一個圖標(biāo)（如果子級沒有加slot，及時填充了html也不會被渲染）

<!-- 父級 wxml -->
 <x-title>
 	<view class="oper-wrap">
            <van-icon name="arrow" />
    </view>
 </x-title>

多插槽

先在子組件的js開啟一下多slot支持

 <!-- 子級 js -->
 options: {
        multipleSlots: true // 在組件定義時的選項(xiàng)中啟用多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>

注意

問：為什么加了插槽，卻沒有反應(yīng)？

雖然我只在【子組件】加了1個插槽，但是因?yàn)榧由狭嗣?，所以同樣需要在【子組件】的js里開啟多插槽

 options: {
        multipleSlots: true // 在組件定義時的選項(xiàng)中啟用多slot支持
    },

插槽官網(wǎng)文檔：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

Component的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時執(zhí)行
    },
    detached: function() {
      // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時執(zhí)行
    },
  },
  //組件所在頁面的生命周期
   pageLifetimes: {
    show: function() {
      // 頁面被展示
    },
    hide: function() {
      // 頁面被隱藏
    },
    resize: function(size) {
      // 頁面尺寸變化
    }
  }
  // 以下是舊式的定義方式，可以保持對 <2.2.3 版本基礎(chǔ)庫的兼容
  attached: function() {
    // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時執(zhí)行
  },
  detached: function() {
    // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時執(zhí)行
  },
  // ...
})

生命周期官網(wǎng)：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

更多編程相關(guān)知識，請?jiān)L問：編程視頻??！

? ??? ?? ?????? ???? ????? ??? ?????? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!