🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-ko

전치

지난번은 input이나 textarea 등으로
기본적인 사용법을 해설했습니다!
이번에는 부모와 자식 사이의 사용법이 메인입니다 🌟

【Nuxt.js】Nuxt 문법편:v-model①

기본 사용법

부모와 자식 사이에서 v-model을 수행하려면 궁리가 필요합니다!

v-model은 이것과 같습니다 💡
v-bind:value, v-on:input

값은 부모로부터받는 props
이벤트는 아이 자체의 이벤트이므로
부모에게 알리기 위해 $emit을 사용합니다 💡



부모로 입력 한 값
아이의 input에도 반영시키고 있습니다👀

components/
--| atom/
----| inputs/
-----| InputDefault.vue

pages/
--| index.vue

해설

【InputDefault.vue】

· v-bind:value="value"
value 속성을 value 속성에 바인딩
value는 props로 값을 부모로부터 얻는다

· @input ="$emit('input', $event.target.value)"
　└ @input :input했을 때(이벤트 핸들러)
　└$emit('input') : 아이의 이벤트명 input를 부모에게 전한다
h tps : //에서. 코 m / 아 · 응 / 응 d6 771724cd7
　└\$event.target.value:
이벤트가 발생하는 (입력 이벤트) 요소 (input)의 값을 얻습니다.
　 입력한 값을 얻을 수 있다는 것입니다 🌟
　$emit의 제2 인수로 사용할 수 있습니다!

코드

InputDefault.vue

<template>
<input
  :value="value"
  @input="$emit('input', $event.target.value)"
>
</template>

<script lang="ts">
export default {
props: {
  value: {
    type: String,
    // ここは影響しない
    default: 'ハロー'
  }
},
}
</script>

또는
v-model과 같은 속성 자체를 부모에게 전달
v-bind="$attrs"에서도 OK⭕️

InputDefault.vue

<template>
<input
  v-bind="$attrs"
  @input="$emit('input', $event.target.value)"
>
</template>

<script lang="ts">
export default {
props: {
  value: {
    type: String,
    // ここは影響しない
    default: 'ハロー'
  }
},
}
</script>

input.vue

<template>
<div class="page">
  <form @submit.prevent>
    <InputDefault
      v-model="message"
    />
    <button
      @click="submit(message)"
    >
      送信
    </button>
  </form>
</div>
</template>

<script>
import InputDefault from '~/components/atom/inputs/InputDefault.vue'

export default {
components: {
  InputDefault,
},
data () {
  return {
    message: 'メッセージ',
  }
},
methods: {
  submit (message) {
    console.log(message)
  },
},
}
</script>

구성 요소에 네이티브 이벤트 바인딩

아이의 input 이벤트
부모로 사용하고 싶을 때 어떻게 하는지,
라는 이야기입니다!

🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-ko