Vue コンポーネント間の値の転送の強さの分析

王雪芹
リリース: 2020-08-12 11:58:35
オリジナル
1357 人が閲覧しました

Vue を使い始めるときは、コンポーネントについて言及する必要があります。場合によっては、コンポーネントは相互に値を渡す必要があります。たとえば、親コンポーネントは子コンポーネントに値を渡し、子コンポーネントは子コンポーネントに値を渡す必要があります。コンポーネントは親コンポーネントに値を渡す必要があるため、次のように強度を使用して詳細を説明します。

効果:

こんな効果を実現したいのですが、入力ボックスに文字を入力して送信ボタンをクリックすると、対応する入力内容が下に表示されます。何かをクリックすると、コンテンツが消えます。

以下に示すように、たとえば 2 をクリックすると 2 が消えます

Vue コンポーネント間の値の転送の強さの分析

##分析:

1. まず、入力コンテンツを取得し、すべての入力コンテンツを配列に収集し、
  • でデータをループします。
  • は同じ構造なので、
  • をコンポーネントにできます。配列は親レイヤーにあり、定義された
  • コンポーネントは子コンポーネント。これは、親コンポーネントが子コンポーネントに値を渡し、データを子コンポーネントに渡すことを意味します。

    2. オプションの
  • をクリックすると、オプションが表示されなくなります。次に、
  • コンポーネントは、現在どのコンポーネントがクリックされているか、および親レイヤーの配列データのどれを削除する必要があるかを親コンポーネントに上向きに通知します。これは値を渡すサブコンポーネントです。親コンポーネント。

    ログイン後にコピー

    コードを通して、サブコンポーネントから親コンポーネントに渡される主な値がここにあることを見つけるのは難しくありません:


    this.$emit('delete',this.index);
    ログイン後にコピー

    さらに、次のことに注意してください。 Vue では、$ で始まるものはすべて vue インスタンス属性またはメソッドと呼ばれます。これに加えて、などのいくつかの略語にも注意する必要があります。
  • 以上がVue コンポーネント間の値の転送の強さの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。