دسترسی به دیتا و توابع کامپوننت فرزند در کامپوننت پدر در Vue
توی این آموزش میخوایم ببینیم که چطوری میشه به دیتا ها و توابعی که توی یک کامپوننت داریم از طریق کامپوننت Parent اون بهش دسترسی داشته باشیم.
من یک پروژه Vue 3 ساختم که توی اون دو تا کامپوننت App و ChildVue داریم.
فایل App.vue بصورت زیر است:
<script setup lang="ts">import { onMounted, ref } from 'vue';import ChildVue from './components/ChildVue.vue';const child = ref()onMounted(() => { child.value.name = 'Zahra'})</script><template> <ChildVue ref="child"/></template>فایل ChildVue.vue هم بصورت زیر است:
<script setup lang="ts">import { ref } from 'vue'const name = ref('mohammad')defineExpose({ name })</script><template> <p>Hello {{ name }}</p></template>توی ویدیوی زیر بصورت کامل براتون توضیح دادم و میتونید تماشا کنید. نکته ای که توی ویدیو یادم رفت بگم اینه که میتونید حتی فانکیشن های کامپوننت Child رو هم صدا بزنید، مثلا:
child.value.doSomthing()داکیومنت مربوط به Vue 3:
https://vuejs.org/api/sfc-script-setup.html#defineexpose
داکیومنت مربوط به vue 2: