Complete Vue.js 3 Guide [10/10]

Check out the full video course:

https://www.udemy.com/course/complete-vuejs-3-course/?referralCode=75F591E320BC4EA22188

In this lesson, we will learn mix-in. It is the simplest way to reuse codes in developing Vue projects.

Here, we have two components: one root component and one child component.

The options objects of the two components may share the same options. The shared options can be defined in an independent object and added back to options objects via mix-in.

First, we declare a variable. We name it myMix-in. We assign an object to it. This object stores shared options. The syntax here is the same as in an ordinary component options object. THIS in the object points to the component instance that receives the mix-in object.

We first add the data option. We define a data property named city.

Then we add the computed option. We define a computed property named capTitle. We define it as a getter.

We return this.title in the getter function. THIS points to the component instance that uses the mix-in object. To make sure the getter can work properly, the component that receives this mix-in object must have a data property named title.

Next we add the mix-in object into component instances.

In the root component, we add the mix-ins option and assign an array to it. Then we pass the mix-in object into the array. The array allows us to pass several mix-in objects.

Now, city and capTitle proeprties will be added into the root component instance. CapTitle is a computed property. Its value is based on the title property of the root component. City is a data property. It will be added into the dollar sign data object.

In the root component template, we can display capTitle and city as ordinary data and computed proeprties.