Category: Vue

We can pass data to a Vue.js component via props.

To do that, we add a props property to a component.

For instance, we can write:

Vue.component('blog-post', {
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

In the code above, we have the blog-post component that takes the postTitle prop.

Then we can use the blog-post component and pass the postTitle prop to it by writing:

<blog-post post-title="hello!"></blog-post>

The prop name is written in kebab-case, but it’ll be mapped to camelCase.

To make the prop passing mechanism more robust, we can set the data type that it takes.

We can do that by writing:

props: {
  postTitle : String
}

The value can be set to any other JavaScript constructor.

In our example, it’s set to String, so postTitle must be a string.

Otherwise, we’ll get an error from Vue.

If we want to pass a dynamic prop, then we’ve to use the v-bind directive or : for short.

For instance, we can write:

<blog-post :post-title="post.title"></blog-post>

or:

<blog-post v-bind:post-title="post.title"></blog-post>

Passing prop values are the way that we pass data to a Vue.js component.

We use the props property, which can be an object or array to indicate the props we want to accept.

If it’s an object, then the value can be any constructor to let us validate that that what’s passed in is the instance of that constructor.

We can pass arguments to event handlers when we call the in v-on.

To pass the event object, we pass $event into the event handler.

We can also pass in any other arguments we want.

For instance, we can write the following HTML:

<input type="number" v-on:input="addToCart($event, ticket.id)">

And we can write:

methods: {
  addToCart(event, id) {
    // ...
  }
}

Then the event parameter has the $event object as its value.

id‘s value is ticket.id.

The input event is runs the addToCart method with those value if it’s triggered.

Vue is very flexible with event handler methods.

To add component styles that are only applied to the component, we have to scope it to the component.

To do that, we have to add the scoped keyword to the style tag.

Scoped styles are only available to single-file components.

All we have to do is write:

<style scoped>
/* local styles */
</style>

in our component.

Then all the styles inside it will only apply to the current component.

We can mix both global and local styles in the same component.

We just have to write:

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Then the styles in the first style tag is applied globally, and the styles in the other one are applied locally.

We can also add selectors to apply styles that affect the current and child components.

For instance, we can write:

<style scoped>
.a >>> .b { /* ... */ }
</style>

Then the styles will be applied to anything with class b if it’s inside the n element with class a in the current component.

DOM content generated with v-html isn’t affected by scoped styles, but we can still style them with deep selectors.

Scoped styles don’t eliminate the need for classes. This is because classes are the faster way to style elements.

We can use the scoped attribute on a style tag to make them styles inside applied locally.

Also, we can have deep selectors to apply styles to a child component of the current component.

DOM content rendered with v-html aren’t affected by scoped styles, but we can style them with deep selectors.

To display unescaped HTML in a Vue app, we can use the v-html directive.

All we have to do is write:

<div v-html="htmlContent"> </div>

in our template.

Then we’ll see the rendered HTML rendered in the div.

We can listen for prop changes by using the watch property.

For instance, we can write:

new Vue({
  el: '#app',
  components: {
    'child' : {
      template: `<p>{{ myProp }}</p>`,
      props: ['myProp'],
      watch: { 
      	myProp(newVal, oldVal) { 
          //...
        }
      }
    }
  }
});

We set props to ['myProp'] to indicate that we’re accepting myProp as a prop.

Then in the watch property, we have the method with the same name to get the old and new values of the prop as parameters.

newVal has the new value and oldVal has the old one.

Then we can do whatever we want with it.