믹슀인

믹슀인(Mixins)은 μ—¬λŸ¬ μ»΄ν¬λ„ŒνŠΈ 간에 κ³΅ν†΅μœΌλ‘œ μ‚¬μš©ν•˜κ³  μžˆλŠ” 둜직, κΈ°λŠ₯듀을 μž¬μ‚¬μš©ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. λ―ΉμŠ€μΈμ— μ •μ˜ν•  수 μžˆλŠ” μž¬μ‚¬μš© λ‘œμ§μ€ data, methods, created λ“±κ³Ό 같은 μ»΄ν¬λ„ŒνŠΈ μ˜΅μ…˜μž…λ‹ˆλ‹€.

믹슀인 μ½”λ“œ ν˜•μ‹

믹슀인 문법은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

var HelloMixins = {
  // μ»΄ν¬λ„ŒνŠΈ μ˜΅μ…˜ (data, methods, created λ“±)
};

new Vue({
  mixins: [HelloMixins]
})

μœ„μ™€ 같이 λ―ΉμŠ€μΈμ„ μ£Όμž…ν•  μ»΄ν¬λ„ŒνŠΈμ— mixins 속성을 μ„ μ–Έν•˜κ³  λ°°μ—΄ [] μ•ˆμ— μ£Όμž…ν•  λ―ΉμŠ€μΈλ“€μ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

믹슀인 μ‚¬μš© μ˜ˆμ‹œ

그럼 μ‹€μ œλ‘œ μžˆμ„ λ²•ν•œ 믹슀인 μ½”λ“œ μ˜ˆμ‹œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€. μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ΅¬ν˜„ν•  λ•Œ 많이 μ‚¬μš©λ˜λŠ” λ‹€μ΄μ–Όλ‘œκ·Έ(λͺ¨λ‹¬ ν˜Ήμ€ νŒμ—… μ°½)의 μ—΄κΈ°, λ‹«κΈ° λ‘œμ§μ„ λ―ΉμŠ€μΈμ— μ •μ˜ν–ˆμŠ΅λ‹ˆλ‹€.

var DialogMixin = {
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    showDialog() {
      this.dialog = true;
    },
    closeDialog() {
      this.dialog = false;
    }
  }
};

DialogMixinμ—λŠ” λ‹€μ΄μ–Όλ‘œκ·Έμ˜ ν‘œμ‹œ μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄λŠ” dialog 데이터와 λ‹€μ΄μ–Όλ‘œκ·Έλ₯Ό μ—΄κ±°λ‚˜ λ‹«λŠ” λ©”μ„œλ“œ showDialog(), closeDialog()κ°€ μ •μ˜λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. 이제 이 λ―ΉμŠ€μΈμ„ μ»΄ν¬λ„ŒνŠΈμ— μ–΄λ–»κ²Œ μ£Όμž…ν• κΉŒμš”? μ•„λž˜ μ½”λ“œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.

<!-- LoginForm.vue -->
<script>
import { DialogMixin } from './mixins.js';

export default {
  // ..
  mixins: [ DialogMixin ]
  methods: {
    submitForm() {
      axios.post('login', {
        id: this.id,
        pw: this.pw
      })
      .then(() => this.closeDialog())
      .catch((error) => new Error(error));
    }
  }
}
</script>

λ―ΉμŠ€μΈμ„ μ‚¬μš©ν•  μˆ˜μ€€μ΄ 되면 보톡은 μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈ μ²΄κ³„μ—μ„œ ES6λ₯Ό λŠ₯μˆ™ν•˜κ²Œ μ‚¬μš©ν•˜κ³  μžˆμ„κ²λ‹ˆλ‹€. μœ„μ˜ μ½”λ“œλŠ” ES6의 λͺ¨λ“ˆν™” 문법을 μ΄μš©ν•΄ λ―ΉμŠ€μΈμ„ λ‹€λ₯Έ νŒŒμΌμ—μ„œ κ°€μ Έμ™€μ„œ μ£Όμž…ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€. submitForm() λ©”μ„œλ“œμ—μ„œ HTTP POST μš”μ²­μ„ 보내고 λ‚˜λ©΄ this.closeDialog()둜 λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜λŠ”λ° 이 λ©”μ„œλ“œλŠ” λ―ΉμŠ€μΈμ— μ˜ν•΄ μ£Όμž…λœ λ©”μ„œλ“œμž…λ‹ˆλ‹€. λ”°λΌμ„œ LoginForm μ»΄ν¬λ„ŒνŠΈμ— 없더라도 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.