การสร้างคอมโพเนนต์ลูกใน Vue

คอมโพเนนต์ภายในมีโครงสร้าง เช่นเดียวกับคอมโพเนนต์หลัก ที่เราเคยทำงานด้วยมาก่อน นั่นคือ ในไฟล์ของแต่ละคอมโพเนนต์จะมี แท็ก script และ template

ลองยกตัวอย่างสร้าง คอมโพเนนต์ชื่อ User วางโค้ดของมันในไฟล์ ที่เกี่ยวข้อง:

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

ในออบเจ็กต์ data ของคอมโพเนนต์สามารถ วางข้อมูลบางอย่างได้:

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

ข้อมูลนี้สามารถแสดงผลใน ส่วนแสดงผลของคอมโพเนนต์ได้:

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

ตอนนี้เรามาเชื่อมต่อคอมโพเนนต์ ที่เราสร้างไว้กับคอมโพเนนต์หลักกัน เพื่อทำสิ่งนี้ ขั้นแรกให้ทำการนำเข้า มัน:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

เขียนชื่อของมันในการตั้งค่า components:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

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

App.vue<template>
  <User />
</template>