Bagaimana untuk menghantar nilai dari konteks dalam vue

API Konteks membenarkan penghantaran data merentas komponen dengan mentakrifkan komponen pembekal untuk menyediakan data dan kemudian mengaksesnya dalam komponen turunan menggunakan fungsi inject(). Langkah khusus termasuk: mentakrifkan komponen penyedia menggunakan fungsi provide() dalam komponen penyedia. Gunakan fungsi inject() untuk menyuntik nilai dalam komponen yang perlu mengakses data kongsi. Akses nilai yang disuntik.

Melalui nilai menggunakan Konteks dalam Vue

Konteks ialah API dalam ekosistem Vue.js yang membenarkan menghantar data merentas komponen dalam pepohon komponen. Ia melakukan ini dengan mentakrifkan nilai dalam komponen penyedia dan kemudian mengakses nilai tersebut melalui API suntikan dalam komponen turunan.

Cara menghantar nilai menggunakan Konteks

Mencipta komponen penyedia

Gunakan fungsi provide() untuk mentakrifkan komponen pembekal. Komponen ini akan menyediakan data yang perlu dikongsi.

<code class="javascript">import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}</code>

Menyuntik nilai

Dalam komponen yang perlu mengakses data kongsi, gunakan fungsi inject() untuk menyuntik nilai.

<code class="javascript">import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
}</code>

Akses nilai yang disuntik

Nilai yang disuntik kini boleh diakses dalam templat atau skrip komponen.

<code class="html"><template>
  <h1>{{ myValue }}</h1>
</template></code>

Contoh

Pertimbangkan pokok komponen dengan komponen induk dan anak. Komponen induk menyediakan nilai 'myValue' yang perlu diakses oleh komponen anak.

Komponen induk (Provider.vue)

<code class="javascript"><script>
import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}
</script></code>

Komponen kanak-kanak (Consumer.vue)

<code class="javascript"><script>
import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
</script></code>

Result

Apabila 'Consumer.vue' memberikan nilai yang disediakan oleh 'Consumer.vue' dan Paparkannya dalam UI.

Atas ialah kandungan terperinci Bagaimana untuk menghantar nilai dari konteks dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!