Vueコンポーネントで値を渡すにはどのような方法がありますか?-よくある問題-php.cn

Vueコンポーネントで値を渡すにはどのような方法がありますか?

DDD

リリース： 2023-07-03 11:23:13

オリジナル

1981 人が閲覧しました

Vue コンポーネントの値の転送方法: 1. props を使用してデータを渡します。親コンポーネントは HTML 属性を通じて子コンポーネントにデータを渡し、子コンポーネントは props を通じて渡されたデータを受け取ります。2. $emit を使用します。イベントをトリガーしてデータを転送します。サブコンポーネントは $emit を使用してカスタムイベントをトリガーします。親コンポーネントは v-on を使用してサブコンポーネントのカスタムイベントをリッスンします。3. Provide/inject を使用してレベル間で値を転送します。親コンポーネントは Provide を通じてデータを提供し、サブコンポーネントは Inject を使用してデータを受け取ります。

Vueコンポーネントで値を渡すにはどのような方法がありますか?

#このチュートリアルの動作環境: Windows 10 システム、dell g3 コンピューター。

Vue コンポーネント間の値の転送は、props、$emit、provide/inject の 3 つの方法で実現できます。

小道具を使用してデータを渡す:

親コンポーネントの HTML 属性を介して子コンポーネントにデータを渡します。子コンポーネントは、親コンポーネントから props を通じて渡されたデータを受け取ります。

親コンポーネント:

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

ログイン後にコピー

子コンポーネント:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

ログイン後にコピー

$emit を使用してデータを渡すイベントをトリガーします:

子内コンポーネント $emit を使用してカスタムイベントをトリガーし、パラメーターとして渡されるデータを渡します。親コンポーネントは v-on を使用して子コンポーネントのカスタムイベントをリッスンし、渡されたデータを取得します。

親コンポーネント:

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>

ログイン後にコピー

子コンポーネント:

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</script>

ログイン後にコピー

クロスレベル値転送に Provide/Inject を使用する:

In親はコンポーネントのprovideを通じてデータを提供し、次にinjectを使用して子コンポーネントでデータを受け取ります。

親コンポーネント:

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

ログイン後にコピー

子コンポーネント:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</script>

ログイン後にコピー

上記は、Vue コンポーネントが値を渡す 3 つの方法です。特定のシナリオとニーズに応じて、コンポーネント間でデータを転送する適切な方法を選択できます。

以上がVueコンポーネントで値を渡すにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。