$root
Misol
Vue ilovasining root komponentidagi "text" data xususiyatini o‘zgartirish uchun bola komponentda $root obyektidan foydalanish.
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the root component.</p>
<button v-on:click="this.$root.text='Hello!'">Change text in root</button>
</div>
</template>
Quyida ko‘proq misollarni ko‘ring.
Ta’rif va qo‘llanilishi
$root obyekti butun Vue ilovasining root komponentiga tegishli Vue nusxasini ifodalaydi.
$root obyekti root komponentning o‘zida ishlatilsa, u shunchaki o‘sha komponentning o‘z nusxasiga ishora qiladi.
$root obyektidan bola komponent ichidan, hatto komponentlar daraxtining ancha pastki qismidan ham root nusxaga to‘g‘ridan-to‘g‘ri murojaat qilish, metodlarni chaqirish, data xususiyatlarini o‘qish yoki o‘zgartirish va hokazolar uchun foydalanishimiz mumkin.
Eslatma: Vue komponentlari o‘rtasidagi aloqa uchun buning o‘rniga props/emit yoki provide/inject’dan foydalanishni o‘ylab ko‘ring, chunki aloqa usullari aniq belgilangan kodni qo‘llab-quvvatlash osonroq.
Ko‘proq misollar
Misol
Komponentlar daraxtida bir necha daraja yuqorida joylashgan root komponentdagi <p> tegining rangini o‘zgartirish uchun bola komponentda $root obyektidan foydalanish.
<template>
<div>
<h4>Grand Child Component</h4>
<p>Click the button to toggle the color of the P tag in the root component.</p>
<button v-on:click="this.$root.color='lightgreen'">Change color in root</button>
</div>
</template>
Tegishli sahifalar
Vue darsligi: Vue props
Vue darsligi: Vue $emit() metodi
Vue darsligi: Vue Provide/Inject
Vue ma’lumotnomasi: Vue $emit() metodi
Vue ma’lumotnomasi: Vue $parent obyekti
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!