Properti-properti Komponen Vue.js

Komponen pada Vue.js memiliki properti-properti yang dapat dirancang dan digunakan sesuai kebutuhan dari program yang dibuat.

Properti-properti komponen Vue.js adalah seperti pada penjelasan-penjelasan berikut ini

1. Mendefinisikan properties
   
   
2. Akses properti pada HTML
   
3. Akses properti melalui script
   
4. Source code PesanSosial.vue

   <template>
     <div
       class="PesanSosial"
       :class="{ PesanSosial__selected: selected }"
       @click="selected = !selected"
     >
       <div class="header">
         <img class="avatar" :src="avatarSrc" />
         <div class="name">{{ username }}</div>
         <div class="userId">{{ userId }}</div>
       </div>
       <div class="post">{{ post }}</div>
     </div>
   </template>
   
   <script setup>
   import { onMounted, ref } from 'vue';
   const selected = ref(false);
   
   const props = defineProps({
     username: String,
     userId: Number,
     avatarSrc: String,
     post: String,
   });
   
   onMounted(() => {
     console.log(props.username)
   });
   </script>
   
   <style lang="scss">
   .PesanSosial {
     &__selected {
       border: blue solid 1px;
     }
     .header {
       display: flex;
       align-items: center;
       margin-bottom: 8px;
     }
     .avatar {
       border-radius: 50%;
       margin-right: 12px;
     }
     .name {
       font-weight: bold;
       margin-right: 8px;
       color: white;
     }
   }
   </style>
   

5. Reactive
   
6. Membaca dari reactive kemudian mengupdate ke komponen
   
7. Source code TheWelcome.vue

   <template>
     <PesanSosial
       :username="posts[0].username"
       :userId="posts[0].userId"
       :avatarSrc="posts[0].avatar"
       :post="posts[0].post"
     ></PesanSosial>
   
     <PesanSosial
       :username="posts[1].username"
       :userId="posts[1].userId"
       :avatarSrc="posts[1].avatar"
       :post="posts[1].post"
     ></PesanSosial>
   </template>
   
   <script setup>
   import { reactive } from 'vue';
   import PesanSosial from './molecules/PesanSosial.vue';
   
   const posts = reactive([
     {
       username: 'Username satu',
       userId: 22,
       avatar: 'https://i.pravatar.cc/40',
       post: 'Posting ke satu',
     },
     {
       username: 'Username dua',
       userId: 33,
       avatar: 'https://i.pravatar.cc/40',
       post: 'Posting ke dua',
     },
   ]);
   </script>
   

8. Menjalankan npm run dev
   
   
9. Tampilan di bowser
   

Kunjungi www.proweb.co.id untuk menambah wawasan anda.