序文

以前、Vueを独学で勉強していたとき、$などの記号を見ると本当に圧倒されてしまい、面談時にコンポーネントの通信はざっくり読んで理解できましたが、値の受け渡しについては深く理解していませんでした。今、私はそれを真剣に勉強することを決心し、困っている人々を助けることを願って、私が理解して消化した考えを最も理解しやすい言語で書くことを試みるためにここに書きます。

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

親コンポーネント APP.vue

親コンポーネントは APP.vue を直接使用して、次のコードを追加できます。

<template>
  <div id="app">
    <Users :users="user1"/>
  </div>
</template>

<script>
import Users from "./components/Users.vue";
export default {
  name: "App",
  components: {
    Users,
  },
  data() {
    return {
      user1: ["kobe", "Jordan", "Iverson"],
    };
  },
};
</script>

それではこのコードについて詳しく説明していきます

コードは非常に単純です。最初に <template> のコンテンツを見てください。ユーザーはサブコンポーネントです。サブコンポーネントのコードを以下に投稿します。次に、v-bind (省略形を使用) を使用してユーザーをバインドし、その割り当てを行っていることがわかりました。実際には、 user1を users として書くこともできますが、そのほうが美しく感じられるためですが、区別して混乱を避けるために、 user1 に変更しました。このうち、users はカスタム名です。好きな名前を付けることができ、このカスタム名はサブコンポーネントで使用されます。

親コンポーネントが行うことは、前の<template>で参照された<Users>サブコンポーネントタグでバインドされたユーザーを通じてサブコンポーネントにデータ内の配列を渡し、サブコンポーネント内のpropsを通じてそれを受け取ることです。

サブコンポーネント Users.vue

<template>
  <div class="hello">
    <ul>
      <li v-for="user in users" :key="user">{
   
   { user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props:{
      users:{
          type:String,
          required:true
      }
  }
};
</script>

詳細コード:

まず、<template> の li にある users 配列を走査したことがわかります。では、この users はどこから来たのでしょうか? これは以下の props から取得され、ここの props は親コンポーネントによって渡された user1 配列を受け入れるために使用されます。props のユーザー、親コンポーネントのカスタムユーザー、およびサブコンポーネント li でトラバースされるユーザーはすべて同じものです。皆さんがこれを理解してくれれば幸いです。コードを自分で入力すれば明らかになるでしょう。最もタブーなのは、入力せずにそれを見れば、何も覚えていないことを保証します。

直接 v-for を実行すると次のエラーが報告される可能性があることに注意してください。

error 反復内の要素には「v-bind:key」ディレクティブが必要です vue/require-v-for-key

これは、v-for がキーを追加していないことを思い出させるためです。上記のコードのようにキーを追加するだけです。なぜそうなるのかについては、ご自身で Baidu にアクセスしてください。v-for を書き込むたびにキーを持参する必要があることだけがわかります。私の理解では、走査される各項目の一意性は保証できると考えています。間違った理解です。上司がコメント欄で私を修正してくれることを願っています。ありがとうございました。

ページに対する最終的な効果は次のとおりです。

別の図を使用して、親コンポーネントから子コンポーネントに値を渡すプロセスを要約してみましょう。

2. 子コンポーネントは値を親コンポーネントに渡します。

親コンポーネント APP.vue

<template>
  <div id="app">
    <Child @wordChanged="updateWord" />
    <h2>{
   
   { parentWords }}</h2>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      parentWords: "这个值是父组件中的值",
    };
  },
  methods: {
    updateWord(event) {
      console.log(event)
      this.parentWords = event;
    },
  },
};
</script>

<style>
</style>

詳細コード:

まず、サブコンポーネント<Child>が導入され、 wordChangedイベントがサブコンポーネントにバインドされ、以下で宣言された関数updateWordとして割り当てられ、最初にデータ内のparentWordsを表示するために h2 が使用されます。

ここでのwordChanged は、サブコンポーネントの$emit メソッドの最初のパラメータと一致している必要があることに注意してください。

updateWord関数をもう一度見てみましょう。この関数にはパラメータがあります。この関数は、サブコンポーネントから渡された値を受け取ることです。最初の行は、渡された値をコンソールに出力することです (レンダリングが表示されるまでしばらくお待ちください)。同時に、割り当てのデータparentWordsはeventに渡される値です。

updataWord のパラメーターイベントは注目に値します。これを次のように記述するとどうなるかです。

<template>
  <div id="app">
    <button @click="updateWord($event)" value="this is a button">click me</button>
    <h2>{
   
   { parentWords }}</h2>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      parentWords: "这个值是父组件中的值",
    };
  },
  methods: {
    updateWord(event) {
      console.log(event)
      console.log(event.target)
      console.log(event.target.value)
      this.parentWords = event;
    },
  },
};
</script>

<style>
</style>

ページの効果を見てみましょう。

右側のボタンをクリックした後:

ご覧のとおり、イベント、次にボタンの本体、最後にボタンの値が取得されており、コードと照らし合わせて確認できます。

そこで、$event の 2 つの使用法を学びました。

1. イベントを取得または現在のイベントのオブジェクト（ここではボタン）を操作し、同時にこのオブジェクトのプロパティ（値など）を取得します

2. 値（テキストなど）を渡すために使用できます

さて、展開はこれで終わりです。引き続きサブコンポーネントを見てみましょう。

子コンポーネント Child.vue

<template>
  <div>
    <button @click="changeWords">click here</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeWords() {
      this.$emit("wordChanged", "这个值是子组件向父组件传的值");
    },
  },
};
</script>

<style type="text/css" scoped>
button {
  width: 80px;
  height: 80px;
  padding: 10px;
  background-color: green;
  color: aliceblue;
}
</style>

詳細コード:

まず、 <template> には、ボタンが 1 つだけあり、クリックイベントchangeWords (エミットメソッド)にバインドされています。放出対発射、送信。このメソッドの最初のパラメータは親コンポーネントのカスタム名wordChanged で、2 番目のパラメータのテキストは親コンポーネントのwordChangedに「送信」され、親コンポーネントのwordChangedのupdateWordによって受信されます。具体的には、次のようになります。updateWordのパラメータイベントを受信します。

最終ページの効果:

ボタンをクリックする前に:

ボタンをクリックした後:

別の図を使用して、親コンポーネントから子コンポーネントに値を渡すプロセスを要約してみましょう。

更新中。。。。。。

Vue のコンポーネント通信を最もわかりやすい言語で説明します

序文

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

2. 子コンポーネントは値を親コンポーネントに渡します。

おすすめ