Home / Snippets / Vue Js Use v-bind for Prop Destructuring
Vue Js Use v-bind for Prop Destructuring cover

Vue Js Use v-bind for Prop Destructuring

277

2 years ago

0 comments

Use v-bind as a kind of a “prop destructuring” instead of passing multiple object properties into a component as props.
<template>
  <post
    :id="post.id"
    :title="post.title"
    :author="post.author"
  />
  
  <!-- This (↑) is the same as this (↓) -->

  <post v-bind="post" />
</template>

<script>
// <post> component definition
export default {
  props: {
    id: Number,
    title: String,
    author: Object
  }
}
</script>
notion avatar

Ahabz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this