Apakah kaedah pemindahan data untuk komunikasi komponen Vue?

Apakah kaedah pemindahan data untuk komunikasi komponen Vue?

Dalam pembangunan Vue, komunikasi komponen adalah bahagian yang sangat penting Melalui komunikasi komponen, pemindahan data dan interaksi antara komponen yang berbeza boleh dicapai. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi komponen, termasuk prop, memancarkan, menyediakan/menyuntik, Vuex, dsb. Artikel ini menerangkan kaedah pemindahan data yang berbeza ini dan menyediakan contoh kod yang sepadan.

1. props dan $emit

props digunakan oleh komponen induk untuk menghantar data kepada komponen anak, dan komponen anak menerima data yang diluluskan melalui prop. $emit digunakan oleh komponen anak untuk menghantar data kepada komponen induk Komponen anak mencetuskan peristiwa dan menghantar data kepada komponen induk melalui $emit. T & lt;

eksport lalai {

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

}

menyediakan/menyuntik

& lt; div & gt; '

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

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

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

Salin selepas log masuk
2. },
tindakan: {

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

}

// ParentComponent.vue

import { mapGetters, mapActions } daripada 'vuex'

&

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

.

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

Atas ialah kandungan terperinci Apakah kaedah pemindahan data untuk komunikasi komponen Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!