Vue 親子コンポーネントの相互値の転送と呼び出し

1. 親が子コンポーネントに値を渡す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
    <child:sid="id"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ（） {
    戻る {
      id:'1234' // 親コンポーネントから子コンポーネントに渡される値}
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
    <p class="child">受け取った親コンポーネントの値は次のとおりです: {{ sid }}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  小道具:{
    シド:{
      タイプ:文字列、
      デフォルト: '0'
    }
  },
  // プロパティ:["sid"],
  データ（） {
   戻る { 

   } 
 } 
} 
</スクリプト>

例:

①sidはサブコンポーネントに渡される値です。「=」の前のsidはサブコンポーネントで受け入れられる変数名と一致している必要があることに注意してください。

② 子コンポーネントで props を使用して、入力値を受け入れます。オブジェクト型として記述したり、型とデフォルト値を指定したり、文字列として直接記述したりできます。

③サブコンポーネント内で直接使用することも、関数内でthis.sidを使用してアクセスすることもできます。

2. 子コンポーネントが親コンポーネントに値を渡す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
   <p class="father">子コンポーネントの値を受け取ります: {{childSid}}</p>
    <child @passValue="親パス値"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ（） {
    戻る {
      childSid:'' // 子コンポーネントの値を受け取る}
  },
  メソッド: {
    親パス値(データ) {
      this.childSid = データ;
    }
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
    <button @click="valueClick">値を渡す</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
    }
  },
  メソッド: {
    値クリック() {
      これを$emit('passVaule',19)します
    }
  }
}
</スクリプト>

例:

① 子コンポーネントに$emitをトリガーするメソッドを指定します。最初のパラメータは、親コンポーネントが子コンポーネントバインディングに導入する関数名（「passVaule」）であり、2番目は渡される値です（19）

②親コンポーネントに関数をバインドし、親コンポーネントにバインドされた関数を呼び出し、その中の値に対して受信操作を実行する

3. 子コンポーネントが親コンポーネントのメソッドを呼び出す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
    <child @funValue="親FunValue"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ（） {
    戻る {
    }
  },
  メソッド: {
    親FunValue() {
      console.log('親コンポーネント内の関数が呼び出されます');
    }
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
    <button @click="funClick">親コンポーネントメソッドを呼び出す</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
    }
  },
  メソッド: {
    funClick() {
      this.$emit('funVaule')
    }
  }
}
</スクリプト>

例:

①子から親に値を渡すのと似ていますが、値を渡すのではなく、親コンポーネントのバインドされた関数を呼び出します。

4. 親が子コンポーネントのメソッドを呼び出す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
    <button @click="childClick">子コンポーネントメソッドを呼び出す</button>
    <child ref="mychild"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ（） {
    戻る {
    }
  },
  メソッド: {
    子クリック() {
      this.$refs.mychild.testNum(1)
    }
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
</ボタン>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
    }
  },
  メソッド: {
    testNum(データ) {
      console.log('子コンポーネントのメソッドが呼び出されました:', data);
    }
  }
}
</スクリプト>

例:

① 親コンポーネントで、インポートした子コンポーネントに ref="mychild" と記述します。Mychid は自身に定義されたインスタンス名です。

②関数内にthis.refs.mychild.testNum()と記述します。「testNum」は子コンポーネントで定義された関数名です。

③子コンポーネントは関数を定義し、親コンポーネントがそれを呼び出すようにします

④このメソッドは値を渡すこともできます。括弧内の値を渡すとサブコンポーネントがそれを受け取ります。

以上がVue親子コンポーネントの相互値転送と呼び出しの詳細です。Vue親子コンポーネントの値転送と呼び出しの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: