[컴] vuejs 에서 component v-model 사용법

vmodel / v-model 사용법 / 내 component에 v-model 넣기 /

vuejs 에서 component v-model 사용법

• How To Add v-model Support to Custom Vue.js Components | DigitalOcean

아래처럼 만들어서 사용하면 된다.

<MyInput v-model="myvalue" />

// MyInput.vue
//
<template>
  <input :value="value" @input="handleInput" />
</template>

<script>
export default {
  prop: {
    value: {
      type: String,
      default: '',
    },
  },

  model: {
    // 다음은 default 값들이다. 이 'model' 이 없으면 'value', 'input' 이 기본 값이 된다.
    prop: 'value', // value prop 을 이용
    event: 'input' // handler 를 input event 에 attach 한다.
  },
  data () {
    return {
    }
  },
  methods: {
    onInput(evt){
      this.$emit('input', evt.target.value)
    }
  },
  watch: {
    // for test
    value(newVal, oldVal){
      console.log(`value = ${newVal}`)
    },
  },
}
</script>

<MyInput v-model="myvalue" />

는 vuejs 가 아래처럼 변경하게 된다.

<MyInput :value="myvalue" @input="$$v => myvalue = $$v" />

// js
_c("MyInput", {
  model: {
    value: _vm.myvalue,
    callback: function ($$v) {
      _vm.myvalue = $$v
    },
    expression: "myvalue",
  },
}),

data flow, 데이터 흐름

대략 아래와 같은 순서로 움직인다. 즉, 값이 변경되면, element 의 value 를 변경하지 않고, 그 값이 변경됐다고 parent component 로 알리고(emit), parent 의 값을 변경한다. 그러면 그 값이 component 의 prop으로 전달되고, 그 prop 의 값을 element 의 value 에 반영하게 된다.

typing 
--> 'input' event 
--> 'input' event handler 
--> emit 'input' event 
--> update the 'myvalue' 
--> update the MyInput's prop.value

다른 prop 과 event 를 사용하기

다음처럼 model 부분을 변경하면 된다.

// MyInput.vue
//
<template>
  <input :value="value2" @input="handleInput" />
</template>

<script>
export default {
  prop: {
    value2: {
      type: String,
      default: '',
    },
  },
  model: {
    prop: 'value2', // value2 prop 을 이용
    event: 'input2' // handler 를 input2 event 에 attach 한다.
  },
  data () {
    return {
    }
  },
  methods: {
    onInput(evt){
      this.$emit('input2', evt.target.value)
    }
  }
}
</script>

위에서

<MyInput v-model="myvalue" />

가 아래처럼 변경된다고 했는데,

<MyInput :value="myvalue" @input="$$v => myvalue = $$v" />

// js
_c("MyInput", {
  model: {
    value: _vm.myvalue,
    callback: function ($$v) {
      _vm.myvalue = $$v
    },
    expression: "myvalue",
  },
}),

그러면 model 에서 값을 바꾸면, 아래처럼 될까?

<MyInput :value2="myvalue" @input2="$$v => myvalue = $$v" />

실제로 render부분의 js code 를 보면 변하지 않는다. 즉, 다른 layer 에서 처리하도록 되어 있다고 보면 된다. 좀 더 자세한 사항은 vuejs code를 확인하자.

// js
_c("MyInput", {
  model: {
    value: _vm.myvalue,
    callback: function ($$v) {
      _vm.myvalue = $$v
    },
    expression: "myvalue",
  },
}),