ミニ プログラム内のスロットと親子コンポーネント間で通信するいくつかの方法の簡単な分析

この記事では、WeChat アプレットのスロットと、親子コンポーネント通信のいくつかの方法を紹介します。お役に立てば幸いです。

今日は、ミニ プログラム内のスロットと親子コンポーネント間の通信を見て、vue との違いを確認します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

1. スロット

1. スロットとは何ですか?

カスタム コンポーネントの wxml 構造では、コンポーネント ユーザーが提供した wxml## をホストするノード (スロット) を提供できます。 # 構造

#実際、スロットは、より簡単に言うと、

サブコンポーネントが穴を掘り、親コンポーネントがその穴を埋めるプロセスです。穴 ＃＃＃。親コンポーネントが子コンポーネントを使用する場合、子コンポーネント内のレイアウト表示が決定されます。

子コンポーネントは穴を掘って穴を埋めます

• 親コンポーネントは、穴を掘って穴を埋めます。コンポーネント タグの真ん中のコンテンツ

2. 単一スロットアプレットでは、デフォルトでは 1 つのみが許可されます。各カスタム コンポーネント

slot

プレースホルダー、この数の制限は単一スロットと呼ばれます

デフォルトでは、コンポーネントの

wxml# には
• が 1 つだけ存在できます## slot複数の slot
を使用する必要がある場合は、コンポーネント
• js で有効化 を宣言できます。注
: small 現在、プログラムにはデフォルト スロットと複数のスロットのみが存在します。スコープ スロットは現時点ではサポートされていません。
• コードは次のとおりです (例):

<!-- 组件的封装者 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <!-- 对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定 -->
  <slot></slot>
</view>

<!-- 组件的使用者 -->
<component-tag-name>
  <!-- 这部分内容将被放置在组件<slot>的位置上 -->
  <view>这里是插入到组件slot的内容</view>
</component-tag-name>

3. 複数のスロットの開始

アプレットのカスタム コンポーネントで、複数のスロットを使用する必要がある場合は、コンポーネントの .js

ファイル

コードは次のとおりです (例):<pre class="brush:js;toolbar:false;">Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多 slot 支持 }， properties: { /* ... */ }, methods: { /* ... */ } })</pre>

4. 複数のスロットを定義します

#コンポーネントの .wxml に含めることができます。 で複数のタグを使用して、異なる name

コードは次のとおりです (例):

<!-- 组件模板 -->
<view class="wrapper">
  <!-- name 为 before 的第一个 slot 插槽 -->
  <slot name="before"></slot>
  <view>这是一段固定的文本内容</view>
  <!-- name 为 after 的第二个 slot 插槽 -->
  <slot name="after"></slot>
</view>

2. 父と子コンポーネントの通信

1. 親子コンポーネント通信

##プロパティ バインディング 子コンポーネントの指定されたプロパティにデータを設定するために親コンポーネントで使用されます。#JSON 互換性のあるデータのみを設定できます (データのみを渡すことができ、メソッドは渡すことはできません)

• #イベントバインディング 確かに 子コンポーネントが親コンポーネントにデータを渡すために使用されます。任意のデータ (配列やメソッドを含む) を渡すことができます

  #コンポーネント インスタンスを取得します 親コンポーネントは、

  this.selectComponent()
を通じて子コンポーネントのインスタンス オブジェクトを取得することもできるため、子コンポーネントの任意のデータとメソッドに直接アクセスできます

• 2. 属性バインディング

#データの転送 プロパティ バインディングは、親から子へ値を転送するために使用され、共通の種類のデータのみを渡すことができます。メソッドを子コンポーネントに渡すことはできません。

コードは次のとおりです (例) :

// 父组件的 data 节点
data: {
  count: 0
}

// 父组件的wxml 结构
<my-test3 count="{{count}}"></my-test3>
<view>~~</view>
<view>父组件中，count值为：{{count}}</view>

Accept data

• サブコンポーネントは、プロパティ ノードで対応するプロパティを宣言し、使用します コードは次のとおりです (例):

// 子组件的 properties 节点
properties: {
  count: Number
}

// 子组件的 wxml 结构
<text>子组件中，count值为：{{count}}</text>

3. イベント バインディングのコア実装手順

イベント バインディングは、子から親への送信 値、任意のタイプのデータを渡すことができます。使用手順は次のとおりです。

親コンポーネントのjs

で、次の形式で子コンポーネントに渡される関数を定義します。カスタム イベント

親コンポーネント

の
• wxml で、手順 1 で定義した関数参照を子コンポーネント ## の形式で渡します。カスタム イベント #subcomponent の
js
• で、this.triggerEvent('カスタム イベント名', {/* パラメータ オブジェクト*/}) を呼び出すと、データは次のようになります。親コンポーネントに送信親コンポーネントの
js
• では、子コンポーネントによって渡されるデータは e.detail を通じて取得されます。
4. イベント バインディングのコア実装コード
• ステップ 1: 親コンポーネントの
js

で、 function を定義すると、この関数はカスタム イベントの形式で子コンポーネントに渡されます。

コードは次のとおりです (例):

// 父组件中定义 syncCount 方法
// 将来，这个方法会被传递给子组件，供子组件进行调用
syncCount() {
  console.log('syncCount')
},

ステップ 2 : 親コンポーネントの

wxml
• で、手順 1 で定義した関数参照をカスタム イベントの形式でサブコンポーネントに渡します
コードは次のとおりです (例):

<!-- 使用 bind: 自定义事件名称(推荐：结构清晰) -->
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>
<!-- 或在 bind 后面直接协商自定义事件名称 -->
<my-test3 count="{{count}}" bindsync="syncCount"></my-test3>

ステップ 3:

subcomponent
• の js で、
this.triggerEvent('カスタム イベント名', {/*パラメータオブジェクト*/})

、親コンポーネントにデータを送信します

コードは次のとおりです(例):

• // 子组件的wxml结构
  <text>子组件中，count值为：{{count}}</text>
  <button type="primary" bindtap="addCount">+1</button>
  
  // 子组件中的 js 代码
  methods: {
    addCount() {
      this.setData({
        count: this.properties.count + 1
      })
      this.triggerEvent(&#39;sync&#39;, {value: this.properties.count})
    }
  }

  • 步骤 4：在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

  代码如下（示例）：

  syncCount(e) {
    // console.log(e.detail.value)
    this.setData({
      count: e.detail.value
    })
  }

  5. 使用 selectComponent 获取组件实例

  父组件如何获得子组件实例？

  可在父组件里调用  this.selectComponent("id或class选择器")，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如  this.selectComponent(".my-component")

  代码如下（示例）：

  // wxml结构
  <my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3>
  <button bindtap="getChild">获取子组件实例</button>
  
  getChild() { // 按钮的tap事件处理函数
    // 切记下面参数不能传递标签选择器 &#39;my-test3&#39;,不然返回的是 null
    const child = this.selectComponent(&#39;.customA&#39;) // 也可以传递 id 选择器 #cA
    child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法
    child.addCount() // 调用子组件的 addCount 方法 
  }

  更多编程相关知识，请访问：编程入门！！

以上がミニ プログラム内のスロットと親子コンポーネント間で通信するいくつかの方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。