أفترض أنك تمتلك مكون فرعي يتم به عرض مجموعة من الأعمال ولنقل انه يتم تخزينها في مصفوفة كائنات projects. وتريد بشكل ما حساب عدد هاته الأعمال وحقنها الى المكون العام الذي يعبر عن الصفحة الرئيسية.
يمكنك كفكرة التقاطها كعائد عن تابع للمكون معرفا كمرجع كـ:
<template>
<div id="app">
<h2> {{ projectsCount }} </h2>
<ProjectsComponent ref="ProjectsComponent" />
</div>
</template>
<script>
import ProjectsComponent from './ProjectsComponent'
export default {
data:{
projectsCount: 0,
}
components: {
ProjectsComponent
},
mounted () {
this.projectsCount = this.$refs.ProjectsComponent.getProjectsCount();
}
}
</script>
قم في داخل المكون الفرعي نعرف التابع getProjectsCount الذي يعيد عدد المشاريع:
<template>
<div id="projects">
projects
</div>
</template>
<script>
export default {
data(){
return {
projects:[
{id: 1, name: 'Web development'},
{id: 1, name: 'Web design'}
]
}
},
methods:{
getProjectsCount(){
return this.projects.length
}
}
}
</script>