Petua untuk menggunakan menyediakan dan menyuntik untuk menghantar data merentas peringkat dalam Vue

Petua untuk menggunakan menyediakan dan menyuntik untuk memindahkan data merentas peringkat dalam Vue

Dalam pembangunan Vue, pemindahan data antara komponen adalah keperluan yang sangat biasa. Biasanya, kita boleh memindahkan data antara komponen melalui props dan kaedah memancarkan, tetapi apabila terdapat pelbagai peringkat sarang antara komponen, kaedah ini menjadi lebih rumit dan sangat mudah untuk menyebabkan gandingan kod. Pada masa ini, menyediakan dan menyuntik dalam Vue boleh berguna.

menyediakan dan menyuntik ialah ciri baharu yang diperkenalkan dalam Vue versi 2.2.0 Kedua-dua API ini boleh melaksanakan operasi menghantar data ke bawah lapisan demi lapisan. Dalam contoh berikut, kami akan menggunakan contoh dengan berbilang peringkat komponen bersarang untuk menunjukkan cara menggunakan menyediakan dan menyuntik untuk mencapai pemindahan data merentas peringkat.

Andaikan kami mempunyai komponen bersarang berbilang lapisan berikut:

<template>
  <div>
    <child1></child1>
  </div>
</template>

<script>
import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};
</script>

<template>
  <div>
    <child2></child2>
  </div>
</template>

<script>
import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
    <grandchild></grandchild>
  </div>
</template>

<script>
import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

Dalam contoh ini, kami berharap untuk mendapatkan data mesej yang ditakrifkan dalam komponen Induk dalam komponen Grandchild. Berikut ialah pelaksanaan khusus:

Gunakan atribut provide dalam komponen Induk untuk menyediakan data yang perlu diluluskan:

<template>
  <div>
    <child1 :message="message"></child1>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello Vue!'
  }
};
</script>

Gunakan atribut inject dalam komponen Grandchild untuk menyuntik data yang disediakan dengan menyediakan:

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In dengan cara ini, komponen Cucu Anda boleh mendapatkan data mesej yang disediakan dalam komponen Induk dengan mudah.

Selain menggunakan data tetap dalam menyediakan dan menyuntik, kita juga boleh menggunakan kaedah dalam menyediakan dan menyuntik untuk menyediakan dan mendapatkan data. Sebagai contoh, sediakan kaedah dalam komponen Induk untuk menetapkan data mesej secara dinamik:

<template>
  <div>
    <child1 :set-message="setMessage"></child1>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Panggil kaedah setMessage dalam komponen Child1 untuk menetapkan data mesej:

<template>
  <div>
    <child2 :message="message"></child2>
    <button @click="setMessage">Set Message</button>
  </div>
</template>

<script>
export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

Suntikan kaedah setMessage melalui atribut inject dalam komponen Grandchild:

<template>
  <div>
    <p>{{message}}</p>
    <button @click="setMessage">Set Parent Message</button>
  </div>
</template>

<script>
export default {
  inject: ['setMessage', 'message']
};
</script>

Melalui ini Dengan cara ini, komponen Cucu boleh memanggil kaedah setMessage dalam komponen Induk untuk menetapkan data mesej secara dinamik.

Ringkasan:

Dengan menggunakan atribut provide dan inject, kami boleh mencapai tujuan menghantar data merentas peringkat dengan mudah. Apabila menggunakan kedua-dua sifat ini, anda perlu memberi perhatian untuk mengelakkan sarang dalam dan gandingan komponen untuk mencapai matlamat kesederhanaan dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Petua untuk menggunakan menyediakan dan menyuntik untuk menghantar data merentas peringkat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!