Posts Learn Components Snippets Categories Tags About
/

Vue Js Use v-bind for Prop Destructuring

Use v-bind as a kind of a “prop destructuring” instead of passing multiple object properties into a component as props

Created on Sep 11, 2021

14 views

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>

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for Vue Js Use v-bind for Prop Destructuring

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More