input 컴포넌트

  • 아래 처럼, v-model을 커스텀 컴포넌트에 사용하고 싶다! 그리고 객체를 넘기고 싶다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div class="wrapper">
    <date-picker v-model="date"></date-picker>
    <p>
      Month: {{date.month}}
      Year: {{date.year}}
    </p>
  </div>
</template>

<script>
import DatePicker from './DatePicker.vue';

export default {
  components: {
    DatePicker
  },

  data() {
    return {
      date: {
        month: 1,
        year: 2017
      }
    }
  }
})
</script>
  • 아래와 같이 선언하면 도니다.

@input 태그를 이용해서, 부모컴포넌트에게 값을 넘겨 주는 것이다.

$emit(‘input’, 인자)를 활용하면, 값을 넘겨 줄 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 선언
<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value
      })
    }
  }
};
</script>

select 컴포넌트

  • 아래와 같이 사용하고 싶다!
1
2
3
<custom-selectbox :items="startTimes"
                  v-model="schedule.$services[0].start">
</custom-selectbox>
  • 이번에는 @change를 이용하고, $emit(‘input’, 인자)를 이용한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div class="custom-selectbox-container">
    <select :value="value" @change="onChange($event.target.value)">
      <option v-for="item in items" :value="item.label">
        {{item.value}}{{unit}}
      </option>
    </select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },

    methods: {
      onChange: function(value) {
        if (value === '') {
          value = null;
        }
        this.$emit('input', value);
      }
    },

    props: ['items', 'value', 'unit']
  }
</script>

Reference

https://alligator.io/vuejs/add-v-model-support/

https://jsfiddle.net/dux6q43p/1/