expose
Misol
Metodni ota komponent foydalana oladigan qilish uchun expose opsiyasidan foydalanish.
export default {
expose: ['createMessage'],
data() {
return {
message: ' '
}
},
methods: {
createMessage(msg) {
this.message += msg + ' '
}
}
}
Quyida ko‘proq misollarni ko‘ring
Ta’rif va qo‘llanilishi
expose opsiyasi ota komponentga template ref’lari orqali qaysi xususiyatlar ochiq bo‘lishini sanab ko‘rsatish uchun ishlatiladi.
Standart holatda bola komponentning barcha xususiyatlari template ref’lari orqali ota komponent uchun ochiq bo‘ladi.
Bu shuni anglatadiki, agar bola komponentda expose opsiyasi bo‘lmasa va ota komponent bola komponentda o‘rnatilgan ref="childComp" atributidan foydalansa, ota komponent bola komponentdagi "message" data xususiyatiga this.$refs.childComp.message kodi orqali murojaat qila oladi. (1-misolga qarang)
Biroq expose opsiyasidan foydalanilganda ota komponent uchun faqat expose opsiyasida ko‘rsatilgan xususiyatlar ochiq bo‘ladi. (2-misolga qarang)
Ko‘proq misollar
1-misol
Bola komponentda expose opsiyasi ishlatilmaydi, shuning uchun bola komponentdagi barcha xususiyatlar ota komponent uchun ochiq bo‘ladi.
ChildComp.vue:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Message from parent component:</p>
<p id="pEl">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ' '
}
},
methods: {
createAlert() {
alert('This is an alert, from the child component')
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
#pEl {
background-color: lightgreen;
font-family: 'Courier New', Courier, monospace;
}
</style>
App.vue:
<template>
<h2>Example expose Option</h2>
<p>The 'expose' option is not used, so all child properties are available to the parent by default, both the 'message' data property, and the 'createAlert()' method:</p>
<button v-on:click="{ this.$refs.childComp.message += 'Hello! '; }">Write 'Hello!'</button>
<button v-on:click="{ this.$refs.childComp.createAlert(); }">Create alert</button>
<child-comp ref="childComp"/>
</template>
2-misol
Ota komponentdan bola komponentdagi "createMessage" metodini ishlatib bo‘lmaydi, chunki bola komponentning expose opsiyasida faqat "message" data xususiyati ko‘rsatilgan.
ChildComp.vue:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Message from parent component:</p>
<p id="pEl">{{ message }}</p>
</div>
</template>
<script>
export default {
expose: ['message'],
data() {
return {
message: ' '
}
},
methods: {
createMessage(msg) {
this.message += msg + ' '
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
#pEl {
background-color: lightgreen;
font-family: 'Courier New', Courier, monospace;
}
</style>
App.vue (ajratib ko‘rsatilgan qator ishlamaydi):
<template>
<h2>Example expose Option</h2>
<p>Only the 'message' data property is listed in the 'expose' option, so the 'createMessage' method from the child component is not available, and will not work:</p>
<input type="text" v-model="inpText" placeholder="Write something">
<button v-on:click="useMet">Use exposed method</button>
<child-comp ref="childComp"/>
</template>
<script>
export default {
data() {
return {
inpText: ''
}
},
methods: {
useMet() {
this.$refs.childComp.createMessage(this.inpText);
}
},
mounted() {
this.$refs.childComp.message = 'Initial message!';
}
}
</script>
Tegishli sahifalar
Vue darsligi: Vue shablon reflari (template refs)
Vue darsligi: Vue komponentlari
Vue ma’lumotnomasi: Vue ref atributi
Vue ma’lumotnomasi: Vue $refs obyekti
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!