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
- Mendefinisikan properties
- Akses properti pada HTML
- Akses properti melalui script
- 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>
- Reactive
- Membaca dari reactive kemudian mengupdate ke komponen
- 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>
- Menjalankan npm run dev
- Tampilan di bowser
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
Properti-properti Komponen Vue.js