Web Devs

#Vuejs
#ComponentLifeCycleHook

#سوال
🔰چگونه Hook های Child Component را در کامپوننت Parent صدا بزنیم؟

🔸در ویو جی اس به صورت معمولی برای اجرای کدی در زمان صدا زده شدن Hook های کامپوننت Child از روش زیر استفاده میکنیم.

🔹روش نرمال انجام این هدف، emit کردن یک Custom Event در کامپوننت child و Bind کردن یک متد به این Custom Event در کامپوننت Parent است، و بدین تصورت میتوانیم کد مد نظر خودمان را در هنگام صدا شده شدن Hook مربوطه کامپوننت Child اجرا کنیم.
🔹به عوان مثال می خواهیم قطعه کد X در زمانی که Hook mounted کامپوننت Child صدا زده شد، اجرا شود.

`<!-- Child -->
<script>
export default {
mounted () {
this.$emit('onMounted')
}
}
</script><!-- Parent -->
<template>
<Child @onMounted="handleOnMounted" />
</template>`

❇️ اما راه حل ساده و جایگزین دیگری نیز وجود دارد برای این کار کافیست به این شکل عمل کنید :
`<!-- Parent -->
<template>
<Child @hook:mounted="handleOnMounted" />
</template>`


🔸در نتیجه handleOnMounted در زمان call شدن هوک مشخص شده اجرا میشود.

@fullStackDevs

www.tgoop.com/fullStackDevs/626

1.73K viewsFeb 1, 2021 at 07:27

#Vuejs
#ComponentLifeCycleHook

#سوال
🔰چگونه Hook های Child Component را در کامپوننت Parent صدا بزنیم؟

🔸در ویو جی اس به صورت معمولی برای اجرای کدی در زمان صدا زده شدن Hook های کامپوننت Child از روش زیر استفاده میکنیم.

🔹روش نرمال انجام این هدف، emit کردن یک Custom Event در کامپوننت child و Bind کردن یک متد به این Custom Event در کامپوننت Parent است، و بدین تصورت میتوانیم کد مد نظر خودمان را در هنگام صدا شده شدن Hook مربوطه کامپوننت Child اجرا کنیم.
🔹به عوان مثال می خواهیم قطعه کد X در زمانی که Hook mounted کامپوننت Child صدا زده شد، اجرا شود.

`<!-- Child -->
<script>
export default {
mounted () {
this.$emit('onMounted')
}
}
</script><!-- Parent -->
<template>
<Child @onMounted="handleOnMounted" />
</template>`

❇️ اما راه حل ساده و جایگزین دیگری نیز وجود دارد برای این کار کافیست به این شکل عمل کنید :
`<!-- Parent -->
<template>
<Child @hook:mounted="handleOnMounted" />
</template>`


🔸در نتیجه handleOnMounted در زمان call شدن هوک مشخص شده اجرا میشود.

@fullStackDevs

BY Web Devs