WeChat アプレットでのコンポーネント通信の概要 (コード例)

この記事では、WeChat ミニ プログラムのコンポーネント通信の概要 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

この記事では主にコンポーネントの通信について説明します

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

 <header title=&#39;{{title}}&#39; bind:fn=&#39;fn&#39; id=&#39;header&#39;></header>

title= を通じて子コンポーネントに値を渡します。 '{{title}}' パラメータをサブコンポーネントに渡します

サブコンポーネントはパラメータを受け取ります:

Component({
  properties: {
    title: {       // 属性名 type: Number, // 类型（必填）
      type: String,//目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    },
    fn: {      
      type: Function,
    },
  },
  data: {
      
  },
  methods: {
    // 子组件调用父组件方法
    childFn() {
      console.log(this.data.title)
      this.triggerEvent("fn");
      //triggerEvent函数接受三个值：事件名称、数据、选项值  
    }
  }
})

methodstitle を使用する場合、this.data.title を直接取得できます

through binding:fn='fn '子コンポーネントにメソッドを渡す

親コンポーネントから渡されたメソッドを受け取るには、メソッド内に新しいメソッド this.triggerEvent("fn") を定義する必要があります。

(2) 親コンポーネントは、子コンポーネントのデータとメソッドを呼び出します。

まず、親コンポーネント js onReady ライフ サイクルでコンポーネントを取得します

onReady: function () {
    //获得popup组件
    this.header= this.selectComponent("#header");
},

たとえば、次の場合、子コンポーネントの関数メソッドを呼び出したい

 // 调用子组件方法
  fn(){
    this.header.fn() //子组件的方法
  },

サブコンポーネントのデータを呼び出すと、this.header.msg

から直接サブコンポーネントのデータを取得できます

以上がWeChat アプレットでのコンポーネント通信の概要 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。