Cara menggunakan provide/inject dalam Vue untuk memindahkan data antara komponen nenek moyang dan komponen keturunan

Dalam Vue, kita selalunya perlu memindahkan data antara komponen. Apabila menghantar data antara komponen nenek moyang dan komponen keturunan, kami boleh menggunakan provide/inject yang disediakan oleh Vue.

1. Peranan menyediakan/menyuntik

Dalam Vue, menyediakan dan menyuntik ialah sepasang API yang digunakan untuk pemindahan data antara nenek moyang dan keturunan.

Secara khusus, provide digunakan untuk mentakrifkan beberapa data/kaedah yang perlu dikongsi dalam komponen nenek moyang, manakala inject digunakan untuk menyuntik data/kaedah ini ke dalam komponen keturunan.

Dengan cara ini, data/kaedah yang disediakan dalam komponen moyang boleh digunakan oleh komponen keturunan, sekali gus merealisasikan pemindahan data dengan baik.

2. Penggunaan provide/inject

Seterusnya, mari kita lihat cara menggunakan provide/inject.

Dalam komponen ancestor, kami boleh menggunakan provide untuk mentakrifkan data/kaedah yang perlu dikongsi, contohnya:

provide: {
  theme: 'blue',
  changeTheme: theme => {
    this.theme = theme
  }
}

Dalam contoh ini, kami mentakrifkan pembolehubah tema dan kaedah changeTheme , dan Mereka dikongsi kepada komponen keturunan melalui menyediakan.

Dalam komponen turunan, kita boleh menggunakan inject untuk menerima data/kaedah ini, contohnya:

inject: ['theme', 'changeTheme']

Dalam contoh ini, kami menerima dua tema data dan changeTheme melalui inject /method.

Dengan cara ini, kita boleh menggunakan dua data/kaedah tema dan changeTheme dalam komponen keturunan.

this.theme // 获取theme变量的值
this.changeTheme('red') // 改变主题色

Perlu diingatkan bahawa apabila menggunakan inject untuk menyuntik data/kaedah, kita tidak perlu menamakannya sama seperti yang ditakrifkan oleh menyediakan Kita boleh memilih nama yang lebih semantik mengikut keperluan.

Selain itu, perlu diingatkan bahawa apabila menggunakan provide/inject, anda perlu memastikan komponen ancestor dicipta sebelum komponen descendant, jika tidak, data/kaedah tidak boleh disuntik. Ini secara amnya boleh dipastikan dengan susunan komponen dicipta.

3. Contoh kod

Di bawah, mari lihat contoh kod lengkap untuk lebih memahami cara menggunakan provide/inject.

Komponen induk:

<template>
  <div>
    <h3>当前主题色为{{theme}}</h3>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
    <hr>
    <child></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  provide() {
    return {
      theme: this.theme,
      changeTheme: this.changeTheme
    }
  },
  data() {
    return {
      theme: 'blue'
    }
  },
  methods: {
    changeTheme(theme) {
      this.theme = theme
    }
  }
}
</script>

Komponen anak:

<template>
  <div>
    <h3>我是子组件</h3>
    <p>当前主题色为：{{theme}}</p>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
  </div>
</template>

<script>
export default {
  inject: ['theme', 'changeTheme'],
  mounted() {
    console.log(this.theme) // blue
  },
  methods: {
    changeTheme(theme) {
      this.changeTheme(theme)
    }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan pembolehubah tema dan kaedah changeTheme dalam komponen induk, dan menyediakan Mereka dikongsi dengan komponen kanak-kanak.

Dalam komponen anak, kami menerima dua data/kaedah tema dan changeTheme melalui suntikan, dan menukar warna tema melalui kaedah changeTheme.

4. Ringkasan

Menggunakan provide/inject boleh mencapai pemindahan data antara komponen nenek moyang dan komponen keturunan dengan berkesan. Apabila menggunakannya, kita hanya perlu menentukan data/kaedah yang perlu dikongsi dalam komponen nenek moyang, dan kemudian menyuntiknya dalam komponen keturunan.

Perlu diingatkan bahawa apabila menggunakan provide/inject, anda perlu memastikan komponen ancestor dicipta sebelum komponen descendant, jika tidak, data/kaedah tidak boleh disuntik.

Atas ialah kandungan terperinci Cara menggunakan provide/inject dalam Vue untuk memindahkan data antara komponen nenek moyang dan komponen keturunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!