Home / MAD2 / Week 6

Week 6 · Advanced Vue: components, props, events and Vue Router

The one-minute story

By the end of this week you can:

• create components (global and local), pass props with validation, and send events back with $emit;
• use slots (default, named, scoped), dynamic components and keep-alive;
• read and write a single file component (.vue) and set up a Vue CLI project;
• configure Vue Router 3: routes, router-link, router-view, dynamic segments, query, named routes, nested routes, guards, lazy loading;
• predict what a component tree or a router configuration renders for a given URL;
• state the lifecycle order for a parent and its child.

Words you need

Idea 1: Components: global and local

A component is almost a small Vue instance, with two differences: it has no el, and data must be a function that returns an object (so each copy gets its own data, and a plain object triggers a warning I reproduced).

<div id="app">
  <hello-card></hello-card>
  <hello-card></hello-card>
</div>
<script>
  // Global registration: available in every template
  Vue.component("hello-card", {
    data() { return { likes: 0 }; },
    template: `<div><button @click="likes++">Like</button> {{ likes }}</div>`,
  });
  new Vue({ el: "#app" });
</script>

The page shows two independent buttons, because data() runs once per copy. If data were an object { likes: 0 } all copies would share it.

// Local registration: only the registering component can use it
const NavBar = { template: `<nav>Home | About</nav>` };
const Page = {
  components: { NavBar },
  template: `<div><nav-bar></nav-bar><p>Content</p></div>`,
};
new Vue({ el: "#app", components: { Page }, template: `<page></page>` });

Vue.component("NavBar", { template: "<p>This is navbar</p>" });
const Model = { template: "<p>This is model</p>" };
new Vue({ el: "#app", template: "<nav-bar></nav-bar>" });

Idea 2: Props down

Props are the input of a component.

Vue.component("player-card", {
  props: {
    playerName: { type: String, default: "Unknown Player" },
    age: { type: Number, required: true },
    tags: { type: Array, default: () => [] },       // object/array defaults are functions
    level: { validator: (v) => ["a", "b"].includes(v) },
  },
  template: `<div><h2>{{ playerName }}</h2><p>Age {{ age }}</p></div>`,
});

<player-card player-name="Rahul" :age="21"></player-card>
<player-card :age="30"></player-card>

• A camelCase prop (playerName) is passed with kebab-case in HTML: player-name="...".
• age="21" passes the string "21"; :age="21" passes the number 21. Use v-bind (:) for anything that is not a string.
• If the parent does not pass the prop, the default is used: the second card above shows Unknown Player. I ran a card like this: with no player-name it printed Unknown Player.
• Short form: props: ["id", "name"] (no checks). Type checks only warn in the console; they do not stop the app. I reproduced Invalid prop: type check failed for a string passed to a Number prop.

<div id="app">
  <player-card>
    <p>Rahul is a versatile player, skilled in defense and attack.</p>
    <p>Position: Captain</p>
  </player-card>
</div>
<script>
  Vue.component("player-card", {
    props: { playerName: { type: String, default: "Unknown Player" } },
    template: `<div>
      <h2>{{ playerName }}</h2>
      <slot>This player is an important part of the team.</slot>
    </div>`,
  });
  new Vue({ el: "#app" });
</script>

Idea 3: Events up and v-model on components

The child calls this.$emit("eventName", payload). The parent listens with @eventName="handler".

<div id="app">
  <p>{{ message }}</p>
  <child-comp @message="updateMessage"></child-comp>
</div>
<script>
  Vue.component("child-comp", {
    template: `<button @click="send">Click</button>`,
    methods: {
      send() { this.$emit("message", "Hello"); },
    },
  });
  new Vue({
    el: "#app",
    data: { message: "Waiting..." },
    methods: { updateMessage(msg) { this.message = msg; } },
  });
</script>

Clicking the button changes the text from Waiting... to Hello (tested). The payload is passed as the handler's first argument. Both of these are correct ways (a real MSQ):

• @message="updateMessage" with this.$emit("message", "Hello") (handler receives the payload);
• @message="updateMessage('Hello')" with this.$emit("message") (the parent supplies the argument in the inline call).

Wrong: this.emit(...) (it is $emit), :message="..." (that is a prop, not a listener), or an event name that differs from the @ name (names must match exactly, including case).

v-model on a component

In Vue 2, v-model on a component is shorthand for a prop named value and an event named input:

Vue.component("my-input", {
  props: ["value"],
  template: `<input :value="value" @input="$emit('input', $event.target.value)">`,
});

<my-input v-model="name"></my-input>

Typing in the box changes the parent's name (tested). The correct way to do "two-way binding in a custom component" is v-model with a prop and an emit; not mutating the prop, not a plain v-bind. There is also :title.sync="x", which pairs the prop title with an event update:title.

In newer Vue 3: v-model uses the prop modelValue and the event update:modelValue; components can declare emits: [...].

Vue.component("counter-button", {
  props: ["count"],
  template: `<button @click="$emit('increment')">Count: {{ count }}</button>`,
});
new Vue({
  el: "#app",
  data: { total: 0 },
  template: `<counter-button :count="total" @increment="total++"></counter-button>`,
});

Idea 4: Slots

A slot lets the parent decide part of the child's markup. Content in the parent's template is compiled with the parent's data.

Vue.component("data-panel", {
  template: `
    <div>
      <header><slot name="header">Default title</slot></header>
      <main><slot>Default body</slot></main>
      <footer><slot name="footer"></slot></footer>
    </div>`,
});

<data-panel>
  <template v-slot:header><h1>Navigation Menu</h1></template>
  <p>Main body text</p>
  <template v-slot:footer>Last updated: Today</template>
</data-panel>

• Default slot (<slot>): receives all content that is not in a named template. Text inside <slot>...</slot> is fallback shown only if the parent provides nothing.
• Named slot (<slot name="header">): filled by <template v-slot:header> (shorthand #header). Old syntax: slot="header" attribute (Vue 2.5 and before; still works).
• Scoped slot: the child passes data up into the slot so the parent decides how to show each item:

Vue.component("item-list", {
  props: ["items"],
  template: `<ul><li v-for="i in items"><slot :item="i">{{ i }}</slot></li></ul>`,
});

<item-list :items="[1, 2]">
  <template v-slot:default="sp">#{{ sp.item }}</template>
</item-list>

renders <ul><li>#1</li><li>#2</li></ul> (tested). Without a slot template, the fallback {{ i }} would print 1 and 2.

Idea 5: Dynamic components and keep-alive

<component :is="name"> renders whichever component name currently refers to: a tab view without a router.

new Vue({
  el: "#app",
  data: { current: "tab-a" },
  components: {
    "tab-a": { template: "<p>A <input></p>" },
    "tab-b": { template: "<p>B</p>" },
  },
  template: `<div>
      <button @click="current = 'tab-a'">A</button>
      <button @click="current = 'tab-b'">B</button>
      <keep-alive><component :is="current"></component></keep-alive>
    </div>`,
});

• Switching destroys the old component and creates the new one, so typed text in A's input is lost.
• Wrapping in <keep-alive> keeps the inactive component alive in memory with its state. I tested: created runs once, switching away runs deactivated, switching back runs activated, and created does not run again.
• keep-alive also works around <router-view> to keep a page's state while navigating away.

Idea 6: Single file components and the Vue CLI

In a real project, components live in .vue files:

<!-- src/components/TaskItem.vue -->
<template>
  <li :class="{ done: task.done }" @click="$emit('toggle', task.id)">
    {{ task.title }}
  </li>
</template>

<script>
export default {
  name: "TaskItem",
  props: { task: { type: Object, required: true } },
};
</script>

<style scoped>
.done { text-decoration: line-through; }
</style>

• template: exactly one root element in Vue 2.
• script: export default { ... }, the options object (name, props, data, methods...).
• style: CSS. scoped makes the rules apply only to this component's elements (Vue adds a unique data-v-xxxx attribute to them).
• A browser cannot run a .vue file. It must be compiled by a tool (vue-loader in Vue CLI, or Vite). You cannot load a .vue file in a script tag. Real MSQ: ".vue files typically contain template, script and style" is true; "must be compiled before they run in the browser" is true; "can be imported directly without preprocessing" is false.

Using it:

<script>
import TaskItem from "./components/TaskItem.vue";
export default {
  components: { TaskItem },
  data() { return { tasks: [{ id: 1, title: "Learn", done: false }] }; },
  methods: { toggle(id) { const t = this.tasks.find((x) => x.id === id); t.done = !t.done; } },
};
</script>
<!-- in the template: -->
<!-- <ul><task-item v-for="t in tasks" :key="t.id" :task="t" @toggle="toggle"></task-item></ul> -->

Vue CLI

npm install -g @vue/cli        # once
vue create my-app              # choose Vue 2 (and Router if you want it)
cd my-app
npm run serve                  # dev server with hot reload, http://localhost:8080
npm run build                  # production files in dist/

Project layout: public/index.html (the page with div id="app"), src/main.js (creates the root instance), src/App.vue (root component), src/components/, src/views/ (page-level components), src/router/index.js, package.json (scripts and dependencies), node_modules/ (never edit), vue.config.js (optional settings, such as the proxy from week 5).

// src/main.js (Vue 2)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

render: h => h(App) is used because the CLI build has no template compiler at run time. Vite is the newer, faster tool (Vue 3 projects usually use it) and Vue CLI is in maintenance mode, but this course uses Vue CLI and Vue 2.

Idea 7: Mixins, plugins and provide / inject at a glance

Mixin. An object of options merged into a component, to share code.

const logMixin = {
  created() { console.log("mixin created"); },
  methods: { hello() { return "hi"; } },
};
export default { mixins: [logMixin], created() { console.log("component created"); } };

Both hooks run; the mixin's hook first, then the component's. If a name clashes (a method with the same name), the component's own wins.

Plugin. A library installed once with Vue.use(plugin, options). A plugin is an object with an install(Vue, options) function that can add global components, directives or Vue.prototype.$something. Vue.use(VueRouter) and Vue.use(Vuex) are exactly that. (With the CDN scripts of Vue and Vue Router 3, the router installs itself.)

provide / inject. A far ancestor offers; any descendant takes, without passing props through every level.

// ancestor
provide: { theme: "dark" },
// any descendant
inject: ["theme"],      // then use this.theme  (shows "dark", tested)

It is not reactive by default for plain values; use it for configuration. For shared changing state use Vuex.

Idea 8: Vue Router 3

Vue Router maps URLs to components in a single-page app. Install npm install vue-router@3 (for Vue 2) or use the CDN script, which gives VueRouter.

const Home = { template: "<p>Home</p>" };
const User = { template: "<p>User {{ $route.params.id }}</p>" };

const router = new VueRouter({
  routes: [
    { path: "/", component: Home },
    { path: "/user/:id", name: "user", component: User },
  ],
});
new Vue({ el: "#app", router });

<div id="app">
  <router-link to="/">Home</router-link>
  <router-link :to="{ name: 'user', params: { id: 7 } }">User 7</router-link>
  <router-view></router-view>
</div>

• router-link renders an a tag (href="/user/7") and navigates without reloading. The active link gets the classes router-link-active and router-link-exact-active.
• router-view is the frame where the matched component is shown.
• Routes are tried in the order written; the first match wins. Put the catch-all { path: "*", component: NotFound } last.
• Inside any component: this.$route is the current route (read it); this.$router is the router (use it to navigate). Mixing them up is a common wrong option (this.$router.params is wrong; this.$route.params.username is right).

Params, query and named routes

A real question: message() { return this.$route.query.update ? "This is create page" : "This is update page" } at /#/?update=true. The query value is the string "true", truthy, so it gives This is create page. Even ?update=false is the string "false", which is also truthy (I checked: it prints the "create" text too); only a missing query gives "update".

Props from the route. { path: "/dashboard/:id", component: Dashboard, props: true } passes :id to the component as a prop id (still a string). With id "8" and a lookup that falls back to the last user when none matches, /dashboard/8 shows This is dashboard for User3 (a real question; the compare uses == between a number and a string, so "1" matches 1).

Named routes. name: "settings" on the route lets you navigate by name: { name: "settings" }. In a real question, the answer was { "name": "Settings" }: the route's name (not the component's name, and path: "Settings" would be missing the slash and capital mismatch).

Programmatic navigation

this.$router.push("/user/7");
this.$router.push({ path: "/search", query: { q: "vue" } });   // /search?q=vue
this.$router.push({ name: "user", params: { id: 7 } });
this.$router.replace("/login");   // like push, but no new history entry
this.$router.go(-1);              // one step back in history (like the Back button)

push adds a history entry, replace does not. In Vue Router 3.1+ push returns a promise that rejects with NavigationDuplicated if you push the route you are already on (I reproduced it); add .catch(() => {}) if that noise matters.

Nested routes

A route can have children. The parent component must contain its own router-view where the child appears. Child paths without a leading slash are relative to the parent.

const user = { template: "<div>Welcome {{ $route.params.name }}<router-view></router-view></div>" };
const home = { template: "<p>This is home page</p>" };
const profile = { template: "<p>This is profile page of {{ $route.params.name }}</p>" };

const routes = [
  { path: "/", component: home },
  {
    path: "/user/:name",
    component: user,
    children: [
      { path: "", component: home },
      { path: "home", component: home },
      { path: "profile", component: profile },
    ],
  },
];

I rendered these for different URLs (abstract mode, same logic):

const routes = [
  { path: "/", component: Home },
  { path: "/dashboard", component: Dashboard,   // template: "Dashboard" + router-view
    children: [{ path: "stats", component: Stats }, { path: "settings", component: Settings }] },
  { path: "*", component: NotFound },
];

Hash mode and history mode

Consequences I verified with a /records/:id route and a * fallback:

The lesson: * only catches URLs that no route matches. An id that matches the pattern but has no data must be handled in your component (v-if="record").

Same component, changing parameter

Going from /u/1 to /u/2 reuses the same component instance, so created and mounted do not run again. I logged: created 1, then on navigating beforeRouteUpdate 2 and a watcher 1->2. React with a watcher or the in-component guard:

data() { return { item: inventory[this.$route.params.productId] }; },
watch: {
  $route(to, from) { this.item = inventory[to.params.productId]; },     // as in the paper
  // or just the param:  "$route.params.productId"(id) { ... }
},

Another real question watches '$route.path', sets a heading and shows links with v-if. At first load none of the watch runs (a watch is not immediate), so the heading shows the initial data value (Vue Router Demo). It then changes on each route change. A computed property that reads $route.params also updates by itself, because $route is reactive.

Navigation guards

A guard runs before the route changes: global router.beforeEach((to, from, next) => {...}), per-route beforeEnter, or in-component beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave. You must call next() (allow), next(false) (cancel) or next("/login") (redirect), exactly once in Vue Router 3.

router.beforeEach((to, from, next) => {
  const loggedIn = !!localStorage.getItem("token");
  if (to.meta.requiresAuth && !loggedIn) next("/login");
  else next();
});
// route: { path: "/profile", component: Profile, meta: { requiresAuth: true } }

I tested a guard with meta: { auth: true }: asking for /settings/7 ended at /login and the guard also ran again for the redirect target. meta is any extra data you attach to a route.

Lazy loading and other options

{ path: "/about", component: () => import("./views/About.vue") }   // loaded only when visited
{ path: "/old", redirect: "/new" }                                  // redirect
{ path: "/search", component: Search, props: (route) => ({ q: route.query.q }) }

Lazy loading splits the build into chunks, so the first page loads faster.

In newer Vue 3: Vue Router 4 uses createRouter({ history: createWebHistory(), routes }), useRoute(), useRouter(), and a catch-all is /:pathMatch(.*)*.

Idea 9: Lifecycle of a parent and child

When a parent contains a child, hooks interleave. I logged both with a mixin:

create:   parent beforeCreate, parent created, parent beforeMount,
          child beforeCreate, child created, child beforeMount,
          child mounted, parent mounted
update:   parent beforeUpdate, child beforeUpdate, child updated, parent updated
destroy:  parent beforeDestroy, child beforeDestroy, child destroyed, parent destroyed

• Creation goes down (parent first), but mounted goes up: the child's mounted runs before the parent's. So in the parent's mounted the children are in the DOM.
• A component's hooks are independent of the parent's: it has its own lifecycle (a real MSQ).
• Typical use: load initial data in created(), start a timer or DOM work in mounted(), clear the timer in beforeDestroy(); destroyed() is after teardown, not for declaring data.
• With keep-alive, activated and deactivated replace the destroy and create on switching.

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 2 papers