JSFiddle - React, Tailwind, and code Playground

Example of using an object as a prop instead of individual values.

by Travis Almand

HTML

<div id="app">
  <link1
    href="https://www.google.com"
    title="google link"
    text="this is google">
  </link1>
  <link2 v-bind:options="{href: 'https://www.bing.com', title: 'bing link', text: 'this is bing'}" />
</div>

Vue

console.clear();

var props2 = {
	href: 'https://www.bing.com',
  title: 'bing link',
  text: 'this is bing'
}

Vue.component('link1', {
	props: ['href', 'title', 'text', 'target'],
  template: '<a v-bind:href="href" v-bind:title="title">{{ text }}</a>'
});

Vue.component('link2', {
	props: ['options'],
  template: '<a v-bind:href="options.href" v-bind:title="options.title">{{ options.text }}</a>'
});

new Vue({
  el: '#app'
});