Хүүхэд компонент хоорондын холбоо

Өмнөх хичээлүүдэд бид эцэг болон хүүхэд компонентууд хоорондын харилцан ажиллагааг судалсан. Одоо хүүхэд компонентууд буюу нэг түвшингийн компонентууд хоорондоо хэрхэн харьцах талаар үзье. Үүний тулд төслийн components хавтаст

<template>
  <div>
    <h1>Тоолуур: {{ counter }}</h1>
  </div>  
</template>

<script>
export default {
  props: ['counter']    
}
</script>

кодтой Counter.vue компонентийг үүсгэе. Counter компонент өөртөө ирэх параметрийн утгыг h1 тегд тоолуурын утгаар л үзүүлнэ.

Нэг түвшингийн хоёр компонентийг үүсгэхийн тулд Counter компонентийг App компонентод

<template>
  <div>
    <h1>Эцэг: {{ carName }}</h1>
    <app-counter :counter="counter"></app-counter>
    <app-car
      :carName="carName"
      :carYear="carYear"
      :counter="counter"
      :changeFunc="changeCarName"
      @nameChanged = "carName = $event"
    ></app-car>  
  </div>
</template>

<script>
import Car from './components/Car.vue'
import Counter from './components/Counter.vue'

export default {
  data () {
    return {
      carName: 'Toyota',
      carYear: 2018,
      counter: 0
    }
  },
  methods: {
    changeCarName() {
      this.carName = 'Benz'
    }
  },
  components: {
    appCar: Car,
    appCounter: Counter
  }
}
</script>

бүртгүүлэн ашиглана. Кодын нэмэлтийн тухайд гэвэл import Counter from './components/Counter.vue' команд компонентийг components хавтасны Counter.vue файлаас импортлохыг заана. Дараа нь бид компонентийг App компонентоос экспорт хийх обьектийн components талбарын обьектод нэмэн өгөх ёстой. Үүний дараа компонентийг App компонентийн хэвд <app-counter :counter="counter"></app-counter> гэж Counter компонентийг оруулан ирнэ. Counter компонентод counter параметрийг counter талбартай холбон дамжуулах учраас data функцээс буцаах обьектод counter талбарыг 0 утгатайгаар үүсгэсэн. Ингэснээр App компонент Car, Counter гэсэн нэг түвшингийн хоёр хүүхэд компоненттой болсон. Хичээлийн зорилго нэг түвшингийн компонентууд хоорондын харьцаа учраас гол асуудал бол Car компонентоос Counter компонентийн тоолуурын утгыг өөрчлөх юм. Иймээс эцэг App компонентод тодорхойлогдсон counter талбарыг Car компонентоос удирдахын тулд түүнийг параметрээр :counter="counter" гэж Car компонентод дамжуулж байгааг анхаарна уу. Өөрөөр хэлбэл App компонентод тодорхойлогдсон counter талбарыг доод түвшингийн хоёр компонентод хоёуланд нь параметрээр дамжуулсанаар тэд хоорондоо харьцах боломжийг бүрдүүлж байгаа хэрэг. Одоо Car компонентийн кодыг

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
    <button @click="changeName">Нэрийг өөрчлөх</button>
    <button @click="changeFunc()">Эцгээс нэрийг өөрчлөх</button>
    <button @click="updateCounter">Тоолуурыг нэмэгдүүлэх</button>
  </div>
</template>

<script>
  export default {
    props: {
      carName: {
        type: String,
        default: 'Нэр байхгүй'
      },
      carYear: Number,
      changeFunc: Function,
      counter: Number
    },
    methods: {
      changeName() {
        this.$emit('nameChanged', 'Prius')
      },
      updateCounter() {
        this.$emit('counterUpdated', 1)
      }
    },
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

<style>
  .car {
    border: 1px solid green;
  }
</style>

болгон өөрчилнө. Компонентод эцэг компонентоос бас нэг параметр нэмэгдэн ирэх тул түүнийг props талбарын обьектод counter: Number гэж нэмнэ. Тоолуурыг Car компонентоос удирдахын тулд түүний шаблонд Тоолуурыг нэмэгдүүлэх товчийг нэмээд товч дээр дарах үйл явцын боловсруулагч updateCounter -ийг холбоно. Үүний дараа Car компонентоос экспортлогдох обьектийн methods талбарт updateCounter аргыг нэмэн оруулна. updateCounter арга changeName аргатай ижил counterUpdated үйл явцыг үүсгээд түүнд 1 утгыг дамжуулна. Үүнийг бид Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд дэлгэрэнгүй үзсэн. Одоо програмыг ажлуулбал

дээрх хуудсыг үзүүлэх боловч Тоолуурыг нэмэгдүүлэх товчийг дарахад тоолуурын утга нэмэгдэхгүй. Яагаад товч ажиллахгүй байгаа шалтгааныг олохыг танд үлдээе. Асуудлыг шийдлийг event emiter -ийг ашиглах хичээлээс үзээрэй.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 891 Нийтийн

RxJs сангийн алдаа боловруулалтын талаар хичээлд авч үзье. Сервертэй ажиллах үеийн ямар нэгэн алдаанаас үүдэн хэрэглэгч талын код ажиллахгүй болох тохиолдол ихээр гардаг тул ийм үед алдааг барин боловсруулалт хийх зайлшгүй шаардлага гардаг. Алдааны боловруулалтыг дараах

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .subscribe((x) => {
        console.log(x);
    });

энгийн жишээн дээр харцгаая.

  Нээгдсэн тоо: 893 Нийтийн

Бодит ажилд нэг чиглүүлэгчээр шилжсэн хуудаснаас тухайн чиглүүлэгчид агуулагдах давхар чиглүүлэгчээр дамжин шинэ хуудас нээх хэрэгцээ их гардаг. Жишээ нь машины мэдээллийг харуулж буй Car компонентийн үзүүлж буй хуудаснаас тухайн машины талаар илүү дэлгэрэнгүй мэдээллийг харуулах хуудаст шилжих хэрэгтэй болсон гэе. Үүнийг VueJs -д давхар чиглүүлэгчийг ашиглан хийдэг. Car компонентоос өөр хуудаст шилжилт хийх гэж байгаа тул түүний шаблонд

<template>
  <div>
    <h1>Car id {{ id }}</h1>
    <button class="btn btn-sm btn-primary mb-2" @click="backToCars">Back</button>
    <br>
    <button class="btn btn-info mt-2">Full info</button>
  </div>
</template>

дахин нэг товчийг нэмэн өгье.

Жич: Хичээлийн материалийг ойлгохын тулд өмнөх хичээлүүдийг үзсэн байх хэрэгтэйг сануулахын дээр Vuejs фреймворкийн үндсэн ойлголтууд хичээлийн багцыг үзэхийг зөвлөе.

  Нээгдсэн тоо: 416 Бүртгүүлэх

Сангийн албан ёсны сайтын нүүр хуудас дахь Get Started товчоор шилжилт хийвэл React -ийн материалууд /Docs/ хэсэгт шилжинэ.

Getting Started хэсэгт React -ийг ажиллуулах аргуудын мэдээлэл бий. Жишээ нь CodePen, CodeSandbox гэх мэт онлайн сервисүүд дээр турших, веб сайтад санг нэмэх, React app үүсгэх гэх мэтээр.

  Нээгдсэн тоо: 1339 Бүртгүүлэх

ES6 -д шинээр гарч ирсэн бүтцийн задаргаа (destructuring assignment) ойлголтын талаар хичээлд авч үзье. Хичээлийн сэдвийг ойлгохын тулд  

let obj = {
    name: 'e-surgalt.com',
    age: 20
};

let name = obj.name;
let age = obj.age;

console.log('name: ' + name, 'age: ' + age);

name, age талбаруудтай обьектыг үүсгэе. obj обьектын талбаруудыг тусдаа хувьсагчуудад авахын тулд өмнө нь дээрх кодод бичигдсэн аргыг ашигладаг байсан. Терминалаас webpack -ийг ажлуулаад хуудсаа хөтөч дээр нээн консолын цонхыг харвал

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 32

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 162

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 218

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 215

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 249

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 240

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 323

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 250

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 246

 
Энэ долоо хоногт

илэрхийллийг хялбарчил.

Нээгдсэн тоо : 1356

 

Паралелграмын AB, CD диагналуудын огтлолцлын цэг O бол векторуудын нийлбэрийг ол.

Нээгдсэн тоо : 1516

 

тэгшитгэлийг бод.

Нээгдсэн тоо : 2387