जावास्क्रिप्ट में कंपोनेंट में डेटा पास करना

पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में डेटा पास किया जा सकता है। इसके लिए कंपोनेंट टैग में डेटा के साथ एट्रिब्यूट्स लिखने चाहिए। चलिए, उदाहरण के लिए, यूजर का नाम और उपनाम पास करते हैं:

App.vue<template>
  <User name="john" surn="smit" />
</template>

ऐसे पास किए गए डेटा को प्रॉप्स कहा जाता है। इसके लिए कि कंपोनेंट यह डेटा प्राप्त करे, इनके नामों को सेटिंग props में सूचीबद्ध करना आवश्यक है:

components/User.vue<script>
  export default {
    props: ['name', 'surn'],
    data() {
      return {
        
      }
    }
  }
</script>

अब पास किया गया डेटा चाइल्ड कंपोनेंट के व्यू में डिस्प्ले किया जा सकता है:

components/User.vue<template>
  {{ name }}
  {{ surn }}
</template>