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
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
<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
1234567891011121314151617181920212223242526272829303132333435
<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,
post:
'Posting ke satu'
,
},
{
username:
'Username dua'
,
userId: 33,
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