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

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

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

1. スロット

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

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

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

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

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

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

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

  这里是组件的内部节点       这里是插入到组件slot的内容 

ログイン後にコピー

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

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

Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多 slot 支持 }， properties: { /* ... */ }, methods: { /* ... */ } })

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

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

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

    这是一段固定的文本内容   

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

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

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

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

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

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

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

// 父组件的 data 节点 data: { count: 0 } // 父组件的wxml 结构  ~~ 父组件中，count值为：{{count}}

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

// 子组件的 properties 节点 properties: { count: Number } // 子组件的 wxml 结构 子组件中，count值为：{{count}}

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

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

親コンポーネントのjs

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

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

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

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

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

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

• // 子组件的wxml结构 子组件中，count值为：{{count}} +1 // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {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结构  获取子组件实例 getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }

  ログイン後にコピー

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

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