Vue コンポーネントの値の転送方法: 1. props を使用してデータを渡します。親コンポーネントは HTML 属性を通じて子コンポーネントにデータを渡し、子コンポーネントは props を通じて渡されたデータを受け取ります。2. $emit を使用します。イベントをトリガーしてデータを転送します。サブコンポーネントは $emit を使用してカスタム イベントをトリガーします。親コンポーネントは v-on を使用してサブコンポーネントのカスタム イベントをリッスンします。3. Provide/inject を使用してレベル間で値を転送します。親コンポーネントは Provide を通じてデータを提供し、サブコンポーネントは Inject を使用してデータを受け取ります。
#このチュートリアルの動作環境: Windows 10 システム、dell g3 コンピューター。
Vue コンポーネント間の値の転送は、props、$emit、provide/inject の 3 つの方法で実現できます。
小道具を使用してデータを渡す:
親コンポーネントの HTML 属性を介して子コンポーネントにデータを渡します。子コンポーネントは、親コンポーネントから props を通じて渡されたデータを受け取ります。
親コンポーネント:
<template> <div> <ChildComponent :message="message"/> </div> </template> <script> import ChildComponent from 'ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello' } } } </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 'ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: '' } }, methods: { updateData(data) { this.message = data; } } } </script>
子コンポーネント:
<template> <div> <button @click="updateMessage">Update Message</button> </div> </template> <script> export default { methods: { updateMessage() { this.$emit('custom-event', 'New Message'); } } } </script>
クロスレベル値転送に Provide/Inject を使用する:
In親はコンポーネントのprovideを通じてデータを提供し、次にinjectを使用して子コンポーネントでデータを受け取ります。
親コンポーネント:
<template> <div> <ChildComponent /> </div> </template> <script> import ChildComponent from 'ChildComponent.vue'; export default { components: { ChildComponent }, provide() { return { message: 'Hello' } } } </script>
子コンポーネント:
<template> <div> {{ message }} </div> </template> <script> export default { inject: ['message'] } </script>
上記は、Vue コンポーネントが値を渡す 3 つの方法です。特定のシナリオとニーズに応じて、コンポーネント間でデータを転送する適切な方法を選択できます。
以上がVueコンポーネントで値を渡すにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。