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.