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.

Properti-properti Komponen Vue.js
Ada yang dapat saya bantu ?