การส่งข้อมูลเข้าไปในคอมโพเนนต์ใน JavaScript

จากคอมโพเนนต์แม่ สามารถ ส่งข้อมูลไปยังคอมโพเนนต์ลูกได้ สำหรับสิ่งนี้ ในแท็กของคอมโพเนนต์ ควรเขียนแอตทริบิวต์พร้อมข้อมูล ตัวอย่างเช่น ลองส่ง ชื่อและนามสกุลของผู้ใช้:

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>