Vue コンポーネント通信のデータ転送方法は何ですか?

Vue コンポーネント通信のデータ転送方法は何ですか?

Vue 開発では、コンポーネント通信は非常に重要な部分であり、コンポーネント通信を通じて、異なるコンポーネント間のデータ転送と対話が実現されます。 Vue は、props、emit、provide/inject、Vuex など、コンポーネント通信を実装するためのさまざまな方法を提供します。この記事では、これらのさまざまなデータ転送方法について説明し、対応するコード例を示します。

1. props と $emit

props は、親コンポーネントによって子コンポーネントにデータを渡すために使用され、子コンポーネントは props を通じて渡されたデータを受け取ります。 $emit は、子コンポーネントが親コンポーネントにデータを渡すために使用され、子コンポーネントはイベントをトリガーし、$emit を通じてデータを親コンポーネントに渡します。

7ab6b075cc6c7bcbe15d0b9685c6f1da
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component :message="message" @update="updateMessage"></child-component>
<p>父组件收到子组件传递过来的数据：{{message}}</p>

16b28748ea4df4d9c2150843fecfba68
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
ChildComponent を './ChildComponent' からインポートします。

デフォルトの {

components: {
  ChildComponent
},
data() {
  return {
    message: ''
  }
},
methods: {
  updateMessage(newMessage) {
    this.message = newMessage
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b をエクスポートします。

<input type="text" v-model="message" />
<button @click="sendMessage">传递数据给父组件</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {

data() {
  return {
    message: ''
  }
},
methods: {
  sendMessage() {
    this.$emit('update', this.message)
  }
}

}
3fa3f474cbb4b6d948eebecb1be5dde4

2. provide/inject

provide と inject は、階層コンポーネント間でデータを渡すための 1 組のオプションです。データは親コンポーネントを通じて提供され、データは親コンポーネントに注入されます。子コンポーネントを達成します。 Provide オプションはデータを提供し、inject オプションはデータを注入します。

7ab6b075cc6c7bcbe15d0b9685c6f1da
dc6dce4a544fdca2df29d5ac0ea9906b

<p>父组件提供数据：{{message}}</p>
<child-component></child-component>

16b28748ea4df4d9c2150843fecfba68
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
ChildComponent を './ChildComponent' からインポートします。

デフォルトの {

components: {
  ChildComponent
},
provide() {
  return {
    message: 'Hello World!'
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b をエクスポートします。

<p>子组件注入数据：{{message}}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {

inject: ['message']

}
3fa3f474cbb4b6d948eebecb1be5dde4

3. Vuex

Vuex は、Vue が公式に提供する状態管理モードで、コンポーネント間で共有されるデータを一元管理するために使用されます。コンポーネント間のデータ転送と対話は、Vuex の状態、ゲッター、ミューテーション、アクションなどを通じて実現されます。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export デフォルト new Vuex.Store({
状態: {

message: 'Hello World!'

},
ゲッター: {

getMessage: state => state.message

},
変異: {

updateMessage(state, newMessage) {
  state.message = newMessage
}

},
アクション: {

changeMessage({ commit }, payload) {
  commit('updateMessage', payload)
}

}
})

// ParentComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component></child-component>
<p>父组件获取数据：{{message}}</p>
<button @click="changeMessage">更改数据</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent from './ChildComponent'
import {mapGetters, mapActions } from 'vuex'

デフォルトのエクスポート {

components: {
  ChildComponent
},
computed: {
  ...mapGetters(['getMessage']),
  message() {
    return this.getMessage
  }
},
methods: {
  ...mapActions(['changeMessage'])
}

}
2cacc6d41bbb37262a98f745aa00fbf0

// ChildComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>子组件获取数据：{{message}}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import {mapGetters } from 'vuex'

export default {

computed: {
  ...mapGetters(['getMessage']),
  message() {
    return this.getMessage
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

上記は、Vue コンポーネント通信の一般的なデータ転送方法をいくつか示しています。各方法には、適用可能な独自のシナリオがあります。実際のニーズに応じて適切なものを選択してください。データ転送の方法。これらの方法を合理的に使用することで、コンポーネント間の柔軟かつ効率的な通信が実現され、開発効率とコード品質が向上します。

以上がVue コンポーネント通信のデータ転送方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。