DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
mixbo
mixbo

Posted on

Friendly Vue.js props helper tools

Friendly vue.js props helps methods which more readable.

use props native way in vue.js

props: {
  name: {
    type: String,
    default: 'foo'
  },
  items:{
    type: Array,
    default: ['foo','bar']
  }
}

It's ok all is working but if vue component have many props and you will define more redundancy code.

props: {
  name: {
    type: String,
    default: 'foo'
  },
  items:{
    type: Array,
    default: ['foo','bar']
  },
  items1:{
    type: Array,
    default: ['foo','bar']
  }
  items2:{
    type: Array,
    default: ['foo','bar']
  }
  items3:{
    type: Array,
    default: ['foo','bar']
  }
}

Emmm looks a little bit more redundancy.

What vprop-types do

// import 
yarn install vprop-types

// import 
import PropsType from 'vprop-types'

// <script>
props: {
  name: PropsType.string.def('foo'),
  items: PropsType.array.def(['foo','bar']),
  items1: PropsType.array.def(['foo','bar']),  
  items2: PropsType.array.def(['foo','bar']),
  kind: PropsType.oneOf(['foo','bar']).def('foo')
}
//

Looks more readable isn't it.

more info you can found vprop-type

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!