- 아래 처럼, 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/
Comment and share
