Vue Academy · Pelajaran

Mixin dan Direktif Khusus

Gunakan kembali logika dengan mixin dan buat direktif khusus.

Mixin dan Direktif Khusus adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Menggunakan Kembali Logika

Seiring aplikasi berkembang, Anda akan menemukan logika yang sama di banyak komponen. Vue menyediakan beberapa cara untuk membagikannya. Pelajaran ini membahas dua cara: pendekatan modul campuran yang lebih lama dan direktif khusus yang andal.

Apa Itu Modul Campuran?

Modul campuran adalah objek berisi opsi komponen (data, metode, dan kait) yang digabungkan ke setiap komponen yang menggunakannya. Ini merupakan cara klasik untuk menggunakan kembali logika di Vue 2.

export const loggerMixin = {
  created() {
    console.log("Component created")
  },
  methods: {
    log(msg) { console.log(msg) }
  }
}

Menggunakan Modul Campuran

Tambahkan modul campuran ke komponen melalui array mixins. Opsi-opsinya akan digabungkan dengan opsi milik komponen.

import { loggerMixin } from "./loggerMixin"

export default {
  mixins: [loggerMixin],
  created() {
    this.log("Ready")
  }
}

Kekurangan Modul Campuran

Modul campuran memiliki masalah nyata: asal sebuah properti tidak jelas (sumber implisit), nama dapat bertabrakan antar-modul campuran, dan aturan penggabungannya membingungkan. Masalah-masalah inilah yang mendorong pendekatan yang lebih baik.

Komposabel: Cara yang Lebih Baik

Di Vue 3, komposabel (fungsi yang menggunakan API Komposisi) menggantikan modul campuran. Komposabel membuat sumber menjadi eksplisit, menghindari benturan nama, dan dapat digabungkan dengan rapi. Utamakan komposabel untuk kode baru.

import { ref } from "vue"

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

Menggunakan Komposabel

Panggil komposabel di dalam setup dan lakukan destrukturisasi tepat pada hal yang Anda perlukan; sumbernya menjadi jelas dan eksplisit.

import { useCounter } from "./useCounter"

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Apa Itu Direktif Khusus?

Direktif khusus membungkus perilaku DOM tingkat rendah yang dapat Anda pasang pada elemen dengan v-name. Direktif ini ideal untuk manipulasi DOM langsung seperti focus, pengguliran, atau tooltip.

Mendaftarkan Direktif Global

Daftarkan direktif pada aplikasi dengan app.directive. Namanya digunakan dalam templat dengan awalan v-.

app.directive("focus", {
  mounted(el) {
    el.focus()
  }
})

// usage: <input v-focus />

Kait Direktif

Direktif memiliki kait siklus hidup: mounted (elemen disisipkan), updated (komponen diperbarui), beforeUnmount (pembersihan), dan lainnya, yang mencerminkan siklus hidup komponen.

app.directive("color", {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value
  }
})

Objek Pengikatan

Argumen kait kedua adalah pengikatan. Objek ini membawa value (nilai yang diteruskan), arg (setelah titik dua), dan modifiers (setelah titik).

// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }

Direktif Lokal

Untuk direktif yang hanya digunakan dalam satu komponen, daftarkan secara lokal dengan opsi directives, bukan secara global.

export default {
  directives: {
    focus: {
      mounted(el) { el.focus() }
    }
  }
}

Uji Cepat

Uji pemahaman Anda tentang modul campuran dan direktif.

Ringkasan

Modul campuran menggabungkan opsi ke dalam komponen, tetapi memiliki sumber implisit dan benturan nama; utamakan komposabel di Vue 3. Direktif khusus, yang didaftarkan dengan app.directive atau secara lokal, membungkus perilaku DOM menggunakan kait seperti mounted dan objek binding. Selanjutnya Anda akan mengemas fungsionalitas sebagai pengaya yang dapat digunakan kembali.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mixin dan Direktif Khusus” gratis?

Ya — teks lengkap “Mixin dan Direktif Khusus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Mixin dan Direktif Khusus”?

Gunakan kembali logika dengan mixin dan buat direktif khusus. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Mixin dan Direktif Khusus” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy