Аливаа зүйлийг сурахад хүнээс багагүй хүч, хөдөлмөр шаардана. Манай хүмүүс яаж хурдан сурах, яаж амар хийх талаар их асуудаг. Хурдан сурах нь тухайн хүнээс л хамаарана. Хүн бол толгой, тархи, санаа бодлыг нь ольчихдог машин техник биш гэдгийг л ойлгоорой. Суралцахад тэвчээр, тогтмол үзэх, чин хүсэл зориг байх хэрэгтэй. Тэгэхгүй бол сайн үр дүнд найдах бараг хэрэггүй. Сайтын хичээлүүд практик ашиглалтад түлхүү анхаарсан тул шууд ашиглах эсхүл гэрын авлаг байдлаар ашиглахад зориулагдсан. 

Энэ удаад Миксин /Mixin/ гэж юу болох, ямар хэрэгтэй, түүнийг хэрхэн ашиглахыг авч үзнэ. Үүний тулд Жагсаалтыг шүүх хичээлийн жишээнд өөрчлөлтийг хийн өргөжүүлье. Төслийн components хавтаст List.vue нэрээр

<template>
  <h1>List</h1>
</template>

<script>
export default {
  
}
</script>

кодтой компонентийг үүсгээд програмын эхлэлийн цэг main.js файлд компонентийг app-list нэрээр глобал байдлаар

import Vue from 'vue'
import App from './App.vue'
import List from './components/List.vue'

Vue.filter('uppercase', value => value.toUpperCase())

Vue.component('app-list', List)

new Vue({
  el: '#app',
  render: h => h(App),
})

бүртгүүлье.

Өмнөх хичээлүүдэд бид хоёр хуудсыг үүсгээд тэдгээрт шилжих чиглүүлэгчийг (router) тохируулаад байгаа. Энэ удаад динамик чиглүүлэгчийг хэрхэн хэрэглэхийг авч үзье. Үүний тулд дараах тохиолдлыг авч үзье. Програмын Cars хуудаст машинуудын жагсаалтыг үзүүлэхээр болгон

<template>
  <div>
    <h1>Cars page</h1>
    <ul>
      <router-link 
        tag="li" 
        v-for="car in 5" 
        :to="'/car/' +car"
        :key=car 
      >
        <a>Car {{car}} </a>
      </router-link>
    </ul>
  </div>
</template>

гэж өөрчилье.

Програмд нэвтрэхэд хэрэглэгчийн нууц үгийг авах талбар ихэнхдээ байдаг. Ийм төрлийн талбарт шалгалтыг хэрхэн хийхийг сурцгаая. Үүний тулд Шалгалтын алдааг үзүүлэх хичээлийн App компонентийн шаблоны кодыг доорх байдлаар өргөжүүлье.

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
    ...
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input 
          type="password" 
          id="password" 
          class="form-control"
          :class="{'is-invalid': $v.password.$error}"
          @blur="$v.password.$touch()"
          v-model="password"
        >

      </div>      
    </form>
  </div>
</template>

React компонентод параметр дамжуулах бас нэгэн аргыг авч үзье. Компонентийн хэвд jsx гэж нэрлэгддэг html маягийн бичлэгийг ашиглаж байгаа. App компонентод Car компонентийг оруулан ирэхдээ

<Car name={'Toyata Prius'} year={'2018'} />

гэж компонентийн нэрийг өөрөө хаагдсан (/> -ийг ашиглана) html тег хэлбэрээр бичин өгч байгаа.