Bagaimana untuk menggunakan komponen Komponen dalam program mini? Perkongsian panduan praktikal

Bagaimana untuk menggunakan Komponen dalam program mini? Artikel berikut akan berkongsi dengan anda panduan komprehensif dan praktikal untuk komponen tersuai program mini saya harap ia akan membantu anda!

Dalam program mini, jika kita ingin mengabstrakkan modul berfungsi dalam halaman dan menggunakan semula dalam halaman yang berbeza, kita boleh menggunakannya Komponen tersuai, komponen tersuai boleh membahagikan halaman kompleks kepada berbilang modul gandingan rendah, yang bukan sahaja mudah digunakan, tetapi juga membantu penyelenggaraan kod kami. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]

Kata Pengantar

Dalam artikel ini anda akan mendapat

• Cara menggunakan program mini secara automatik Tentukan komponen

• Pelbagai pemindahan nilai antara komponen tersuai

• Penggunaan slot dalam komponen tersuai

• Menecam, program mini dalam artikel ini merujuk kepada program mini WeChat (tetapi program mini lain sepatutnya mempunyai idea yang sama)

• Menenangkan, artikel ini terutamanya Kandungannya adalah mengenai pelbagai kegunaan komponen tersuai, bukan mengajar anda cara merangkum komponen!

Persediaan asas (boleh diabaikan)

Tambah folder baharu

Mula-mula buat folder khusus untuk komponen tersuai dalam direktori akar ( Folder nama adalah sewenang-wenang dan lokasi adalah sewenang-wenangnya)

Buat fail Komponen baharu

Kemudian dalam editor program mini, klik kanan dan buat Komponen baharu

Mengapa anda perlu menyebut langkah ini secara khusus?

Saya tidak tahu sama ada ada rakan yang, seperti saya, hanya menggunakan alat pembangunan program mini sebagai alat pratonton, dan kemudian menggunakan editor lain untuk pembangunan.

Kemudian saya mendapati bahawa jika saya mencipta Komponen atau Halaman baharu secara langsung dalam program mini, ia akan mencipta keempat-empat fail sekali gus, dan templat kandungan juga akan diisi, jadi kini pembangun Selain pratonton alat, saya juga menggunakannya untuk mencipta fail baharu.

Contoh penerangan latar belakang

Kami akan menulis contoh komponen mudah menggunakan tajuk pembahagian modul dalam gambar di bawah sebagai contoh (sekadar contoh buta)

Bagaimana untuk memperkenalkan komponen tersuai?

Tidak banyak yang perlu diperkatakan tentang penciptaan, cuma ikuti [Fail Komponen Baru] di atas. Jika anda menciptanya secara manual, jangan lupa untuk mengisytiharkannya dalam fail json (ia disertakan secara lalai dalam program mini. alat pembangunan)

{
  "component": true
}

Perkenalkan kaedah komponen

Buat pengisytiharan rujukan dalam json fail halaman

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

Dalam halaman Bagaimana untuk menggunakan komponen tersuai dalam wxml seperti komponen asas (nama harus konsisten dengan pengisytiharan)

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

?

Komponen induk menghantar nilai kepada komponen anak

Anda dapat melihat bahawa kami telah mencatatkan kandungan tajuk di atas, tetapi dalam penggunaan sebenar, kami pasti perlu lulus dalam tajuk yang berbeza mengikut kandungan modul yang berbeza, jadi kita perlu menggunakan pemindahan nilai antara ibu bapa dan anak.

Ibu bapa memberikan nilai kepada anak

<!-- 父级wxml -->
<x-title titleText="全部订单"></x-title>

<!-- 如果父级的值是一个变量则 -->
<x-title titleText="{{currentTitle}}"></x-title>

Anak menerima nilai daripada ibu bapa

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

Komponen anak menghantar nilai kepada komponen induk

Ubah suai komponen sedikit dan tambah butang operasi terperinci Pada masa ini, berbilang modul telah diperolehi melalui gelung. kanak-kanak itu menyerahkan ID modul semasa kepada ibu bapa.

Komponen anak menghantar parameter kepada komponen induk

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

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

Komponen induk menerima parameter komponen anak

<!-- 父级 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(&#39;从子组件接收到的id&#39;,id)
  }

Ibu bapa memanggil kaedah komponen anak

Komponen kanak-kanak mentakrifkan kaedah A

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

Ibu bapa mula-mula memberikan komponen anak id

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

<van-button type="primary" bindtap="triggerChildMethod">调用子组件方法</van-button>

untuk mendapatkan komponen dalam kitaran hayat halaman js, dan kemudian simpannya ke titleCom pembolehubah tersuai kami, dan kemudian Anda boleh terus memanggil kaedah dalam subkomponen

<!-- 父级 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

在自定义组件中使用插槽（slot）

我们上面在自定义组件中加了【详情】查看的操作按钮，但是有的地方我们可能并不想用文字，想改成图标或者按钮，当某处放置的节点内容不确定时，我们就可以使用插槽来处理。

插槽就相当于在子组件中放一个占位符，这样父组件就可以向子组件填充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的生命周期

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

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Bagaimana untuk menggunakan komponen Komponen dalam program mini? Perkongsian panduan praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!