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

•

233 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>

Vue Js Snippets

new

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

Patreon