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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

   <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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

   <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.