Vue.js Gotchas and Use Cases

From their guide, I’ve put together some things that I’ve struggled with in the past.

Props

In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.

Passing Data with Props

Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.

A prop is a custom attribute for passing information from parent components. A child component needs to explicitly declare the props it expects to receive using the props option:

Vue.component('child', { 
// declare the props 
props: ['message'], 
// like data, the prop can be used inside templates and  // is also made available in the vm as this.message 
template: '<span>{{ message }}</span>'
})

Then we can pass a plain string to it like so:

<child message="hello!"></child>

Read more:
https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

camelCase vs. kebab-case

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

Vue.component('child', { 
// camelCase in JavaScript 
props: ['myMessage'], 
template: '<span>{{ myMessage }}</span>'
})
<!– kebab-case in HTML –>
<child my-message="hello!"></child>

Again, if you’re using string templates, then this limitation does not apply.

Read more:
https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

Literal vs. Dynamic

A common mistake beginners tend to make is attempting to pass down a number using the literal syntax:

<!– this passes down a plain string “1” –>
<comp some-prop="1"></comp>

However, since this is a literal prop, its value is passed down as a plain string “1” instead of an actual number. If we want to pass down an actual JavaScript number, we need to use v-bind so that its value is evaluated as a JavaScript expression:

<!– this passes down an actual number –>
<comp v-bind:some-prop="1"></comp>

Learn more:
https://vuejs.org/v2/guide/components.html#Literal-vs-Dynamic

One-Way Data Flow

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.There are usually two cases where it’s tempting to mutate a prop:

  1. The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.
  2. The prop is passed in as a raw value that needs to be transformed.

The proper answer to these use cases are:

  1. Define a local data property that uses the prop’s initial value as its initial value:
  2. props: [‘initialCounter’],data: function () {  return { counter: this.initialCounter }}
  3. Define a computed property that is computed from the prop’s value:
  4. props: [‘size’],computed: {  normalizedSize: function () {    return this.size.trim().toLowerCase()  }}

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child will affect parent state.

Read more:
https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

Prop Validation

It is possible for a component to specify requirements for the props it is receiving. If a requirement is not met, Vue will emit warnings. This is especially useful when you are authoring a component that is intended to be used by others.

Read more:
https://vuejs.org/v2/guide/components.html#Prop-Validation