ミニプログラムでコンポーネントコンポーネントを使用するにはどうすればよいですか?実践的なガイドの共有

ミニ プログラムで Component コンポーネントを使用するにはどうすればよいですか?次の記事では、ミニ プログラムのカスタム コンポーネントに関する包括的で実践的なガイドを紹介します。お役に立てば幸いです。

ミニ プログラムで、ページ内の機能モジュールを抽象化し、別のページで 再利用したい場合は、カスタム コンポーネントを使用できます。カスタム コンポーネントは、複雑なページを複数の 低結合モジュールに分割できます。これは使いやすいだけでなく、コードのメンテナンスにも役立ちます。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]

序文

この記事から得られる情報

• 使用方法ミニ プログラム コンポーネントの定義

• カスタム コンポーネント間のさまざまな値の転送

• カスタム コンポーネントでのスロットの使用

• 地雷除去、この記事のミニ プログラムは WeChat ミニ プログラムを指します (ただし、他のミニ プログラムも同様の考え方を持つはずです)

• 地雷除去、この記事の主な内容カスタム コンポーネントのさまざまな使用方法について説明しており、コンポーネントをパッケージ化する方法を説明するものではありません。

基本的な準備 (無視しても構いません)

新しいフォルダーの追加

最初にルート ディレクトリにカスタム コンポーネント専用のフォルダーを作成します (フォルダー名前と場所は任意です）

新しいコンポーネント ファイルを作成します

次に、ミニ プログラム エディターで右クリックし、新しいコンポーネントを作成します

なぜこのステップについて特に言及する必要があるのでしょうか?

私と同じように、小規模なプログラム開発ツールをプレビュー ツールとしてのみ使用し、その後は他のエディターを使用して開発した友人がいるかどうかはわかりません。

後で、ミニ プログラムでコンポーネントまたはページを直接作成すると、4 つのファイルすべてが一度に作成され、コンテンツ テンプレートも入力されることがわかりました。開発者は、ツールのプレビューに加えて、新しいファイルの作成にも使用します。

サンプルの背景説明

下図のモジュール分割タイトルを例として使用して、簡単なコンポーネントの例を作成します (単なる盲目的な例)

#カスタム コンポーネントを導入するにはどうすればよいですか?

作成については特に言うことはありませんが、上記の [新しいコンポーネント ファイル] に従ってください。手動で作成する場合は、json ファイルで宣言することを忘れないでください (新しいミニ ファイルにはデフォルトで含まれています)。プログラム開発ツール)

{
  "component": true
}

コンポーネント メソッドの紹介

の

json

ファイルに参照ステートメントを作成します。ページ<pre class="brush:js;toolbar:false;">&lt;!-- 引用组件的json文件 --&gt; { &quot;usingComponents&quot;: { &quot;x-title&quot;: &quot;/components/title/title&quot; } }</pre>ページ内

wxml

では、基本コンポーネントと同様にカスタム コンポーネントを使用します (名前は宣言と一致している必要があります) <pre class="brush:js;toolbar:false;">&lt;!-- 引用组件的wxml文件 --&gt; &lt;x-title&gt;&lt;/x-title&gt;</pre>値を渡す方法は?

親コンポーネントは子コンポーネントに値を渡します

上にタイトルの内容を書き留めていることがわかりますが、実際の使用では、異なるモジュールに応じて異なるタイトルを渡す必要があります。 . コンテンツなので、親と子の間で値の転送を使用する必要があります。

#親は子に値を渡します

#

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

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

#子は親から渡された値を受け取ります#

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

子コンポーネントは親コンポーネントに値を渡します

コンポーネントを少し修正し、詳細操作ボタンを新たに追加します。現在、ループによって複数のモジュールが取得できています。詳細をクリックすると、子は現在のモジュールの ID を親に渡します。

#子コンポーネントは親コンポーネントにパラメータを渡します

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

<!-- 子级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获取子组件传过来的参数
gotoDetail(e){ 
    const id = e.detail 
    console.log(&#39;从子组件接收到的id&#39;,id)
  }

親は子コンポーネントのメソッドを呼び出します子コンポーネントはメソッドを定義します

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

Parent まず、サブコンポーネントに id

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

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

js ページのライフサイクルでコンポーネントを取得し、それをカスタム変数 titleCom に保存します。その後、サブコンポーネントのメソッド

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

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

以上がミニプログラムでコンポーネントコンポーネントを使用するにはどうすればよいですか?実践的なガイドの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。