v-model 및 하위 구성 요소
v-model을 사용하여 입력을 바인딩하는 폼이 있습니다.
<input type="text" name="name" v-model="form.name">
입력을 오브젝트에 의 값을 묶을 수 요? 그러면 자식 구성 요소의 값을 부모 개체에 바인딩하려면 어떻게 해야 합니까?form.name
설명서에 기재된 바와 같이
v-model통사설탕은 다음을 위한 것입니다.
<input v-bind:value="something" v-on:input="something = $event.target.value">
「 」를 실장하려면v-model다음 중 하나:
value- 내부 값에 대해 계산된 세터를 사용하여 계산된 속성을 만듭니다(구성 요소 내에서 프로포트의 값을 수정하면 안 되므로).
-
get메서드('Method'를 함)value -
set.input이
다음은 간단한 예입니다.
Vue.component('my-input', {
template: `
<div>
My Input:
<input v-model="inputVal">
</div>
`,
props: ['value'],
computed: {
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
}
})
new Vue({
el: '#app',
data() {
return {
foo: 'bar'
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<!-- using v-model... -->
<my-input v-model="foo"></my-input>
<!-- is the same as this... -->
<my-input :value="foo" @input="foo = $event"></my-input>
{{ foo }}
</div>@kthornbloom님이 이전 구현에서 문제를 발견해 주셔서 감사합니다.
Vue 3의 변경 사항 해제
설명서에 따르면 Vue 3의 v-model 구현에 대한 변경 사항이 있습니다.
value->modelValueinput->update:modelValue
지정해 주세요.:value 및 소품@input컴포넌트 에서는 '자 컴포넌트'를 사용할 수 .v-model부모 컴포넌트에 구문을 입력합니다.
Vue 2
마이 입력표시하다
<template>
<input
:value="value"
@input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value']
};
</script>
Screen.vue
<template>
<my-input v-model="name" />
</template>
<script>
import MyInput from './MyInput.vue';
export default {
components: { MyInput },
data: () => ({
name: ''
})
};
</script>
Vue 3
마이 입력표시하다
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: ['modelValue']
};
</script>
Screen.vue
<template>
<my-input v-model="name" />
</template>
<script>
import MyInput from './MyInput.vue';
export default {
components: { MyInput },
data: () => ({
name: ''
})
};
</script>
sync 2. 필요에 따라 vue > 2.2를 사용합니다.emit컴포넌트에 넣습니다.
다음 문서를 확인하십시오.- https://alligator.io/vuejs/upgrading-vue-2.3/ #propsync
간단한 예(vue 2.5 사용):
Vue.component('my-input', {
template: '<input v-on:keyup="onChange($event)" :value="field"></div>',
props: ["field"],
methods: {
onChange: function (event) {
this.$emit('update:field', event.target.value);
}
}
});
var vm = new Vue({
el: '#app',
data:{val: ''},
});h1 span { color: red }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id='app'>
<h1>
value
<span>{{ val }}</span>
</h1>
<my-input :field.sync="val">
</my-input>
</div>Vue 2용 솔루션
및 리스너(「」를 포함한다)를 수 .v-model부모에서 자녀로) 다음과 같이.
<input v-bind="$attrs" v-on="$listeners" />
바인딩을 포함합니다( Atribute Atribute Binding 제외).
class★★★★★★★★★★★★★★★★★」style소품으로 인식되지 않는(및 추출되지 않은) 것.소품이 범위 바인딩이 ).class★★★★★★★★★★★★★★★★★」style를 통해 할 수 .v-bind=" $attrs"- 고차 컴포넌트를 작성할 때 유용합니다.
'이렇게'를 설정해 .inheritAttrs로로 합니다.falseAtribut이 루트 요소에 적용되지 않도록 합니다(기본적으로는 모든 Atribut이 루트에 적용됩니다).
리스너 ('v-on' 없음)
.native이치노 구성 수 .v-on="$listeners"- 투명 래퍼 구성 요소를 만들 때 유용합니다.
★★★★★★★★★★★★★★★★★★v-model is is is is is is is is is is의 일 뿐이다v-bind+v-on , , , , , , , , , , , , , , , , , , , , ,
이 기술은 Vue 2.4.0(2017년 7월)부터 사용할 수 있으며, 이 기능을 "랩퍼 컴포넌트의 간단한 생성"이라고 합니다.
Vue 3용 솔루션
Vue 3은$listeners '오브젝트'에 있기 합니다.$attrs요.라음
<input v-bind="$attrs" />
다음 매뉴얼을 참조해 주십시오.
구성 요소 소품 또는 사용자 지정 이벤트로 인식되지 않는(및 추출되지 않은) 부모 범위 속성 바인딩 및 이벤트를 포함합니다.컴포넌트에 선언된 소품이나 커스텀이벤트가 없는 경우 기본적으로 모든 부모 범위 바인딩을 포함하며 이를 통해 내부 컴포넌트에 상속할 수 있습니다.
v-bind="$attrs"컴포넌트를 작성할 때 - 컴포넌트를 작성할 때 편리합니다.
있는 은 여러 요소를 합니다), """ (Vue 3은 여러 루트 요소를 합니다)""""""""""""" """ " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " 를 설정합니다.inheritAttrs로로 합니다.false이 경우에도 루트 요소에 Atribut이 적용되지 않도록 해야 합니다.
여기 의 문서가 있습니다.
기본적으로는 소품으로 인식되지 않는 상위 범위 속성 바인딩은 "폴스루"됩니다.즉, 단일 루트 구성 요소가 있는 경우 이러한 바인딩이 일반 HTML 속성으로 하위 구성 요소의 루트 요소에 적용됩니다.대상 요소 또는 다른 구성 요소를 감싸는 구성 요소를 작성할 때 이것이 항상 바람직한 동작은 아닐 수 있습니다.설정별
inheritAttrs로로 합니다.false이 디폴트 동작은 디세블로 할 수 있습니다.은 Attribute를 할 수 있습니다.$attrs및 instance를 사용하여 수 .v-bind.
와의 또 다른 은 Vue 2의 ,$attrs에는 이제 브음음음음음음음음음음음음음 object object가 포함됩니다.class ★★★★★★★★★★★★★★★★★」style.
다음은 "속성 상속 비활성화"의 일부입니다.
「 」를 .
inheritAttrs" " " option to " " option to " )falseAttribute를 할 수$attrs컴포넌트에 되지 않은 됩니다.props★★★★★★★★★★★★★★★★★」emits속성(예: , 청취자 등)
아래 예에서는 모델을 부모 구성 요소에서 자녀 구성 요소로 설정하고 이들 구성 요소 간에 데이터를 동기화하는 방법을 보여 줍니다.이는 앱 양식을 다른 구성 요소로 분할하고 다른 컨텍스트에서 사용할 때 매우 유용합니다.예를 들어 양식 조각(구성요소)을 반복하지 않고 다른 위치에 사용할 수 있습니다.
모부품
<template lang="pug">
.parent
Child(:model="model")
br
label(for="c") Set "c" from parent
input(id="c", v-model="model.c")
.result.
<br>
<span> View from parent :</span>
<br>
a = {{ model.a }}
<br>
b = {{ model.b }}
<br>
c = {{ model.c }}
</template>
<script>
import Child from './components/child.vue'
export default {
name: "App",
components: {
Child
},
data() {
return {
// This model is set as a property for the child
model: {
a: 0,
b: 0,
c: 0
}
}
},
};
</script>
자부품
<template lang="pug">
.child
label(for="a") Set "a" from child
input(id="a", v-model="internalModel.a", @input="emitModel")
<br>
<br>
label(for="b") Set "b" from child
input(id="b", v-model="internalModel.b", @input="emitModel")
.result
<br>
span View from child
<br>
| a = {{ internalModel.a }}
<br>
| b = {{ internalModel.b }}
<br>
| c = {{ internalModel.c }}
</template>
<script>
export default {
name: 'Child',
props: {
model: {
type: Object
}
},
data() {
return {
internalModel: {
a:0,
b:0,
c:0
}
}
},
methods: {
emitModel() {
this.$emit('input', this.internalModel)
}
},
mounted() {
this.internalModel = this.model;
}
}
</script>
데이터를 사용자 지정 확인란 또는 확인란 세트에 바인딩하는 것은 텍스트 입력에 바인딩하는 것과 크게 다릅니다.
https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/
<template>
<label>
<input type="checkbox" :checked="shouldBeChecked" :value="value" @change="updateInput">
{{ label }}
</label>
</template>
<script>
export default {
model: {
prop: 'modelValue',
event: 'change',
},
props: {
value: {
type: String,
},
modelValue: {
default: false,
},
label: {
type: String,
required: true,
},
// We set `true-value` and `false-value` to the default true and false so
// we can always use them instead of checking whether or not they are set.
// Also can use camelCase here, but hyphen-separating the attribute name
// when using the component will still work
trueValue: {
default: true,
},
falseValue: {
default: false,
}
},
computed: {
shouldBeChecked() {
if (this.modelValue instanceof <span class="hljs-built_in">Array) {
return this.modelValue.includes(this.value);
}
// Note that `true-value` and `false-value` are camelCase in the JS
return this.modelValue === this.trueValue;
}
},
methods: {
updateInput(event) {
let isChecked = event.target.checked;
if (this.modelValue instanceof Array) {
let newValue = [...this.modelValue];
if (isChecked) {
newValue.push(this.value);
} else {
newValue.splice(newValue.indexOf(this.value), 1);
}
this.$emit('change', newValue);
} else {
this.$emit('change', isChecked ? this.trueValue : this.falseValue);
}
}
}
}
</script>
다음을 사용하여 플레이스 홀더와 같은 모든 입력 속성을 전달할 수 있습니다.
Vue.component('my-input', {
template: `<div>
<input v-bind="$attrs" :value="value" @input="$emit('input', $event.target.value)">
</div>`,
inheritAttrs: false,
props: ["value"],
})
new Vue({
el: '#app',
data: () => ({
name: "",
}),
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<div>Name: {{name}}</div>
<input placeholder="Standard Input" v-model="name">
<my-input placeholder="My Input" v-model="name"></my-input>
</div>Vue 3의 경우
value되어 있는 이 '소품'이 .modelValueemiss 이벤트도 그에 따라 변경되었습니다.
https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy
^ 이행전략에서 제안된 몇 가지 변경사항으로 인정된 답변을 구현함으로써 실현되었습니다.
상기의 방법 외에, 보다 심플한 실장이 있습니다.
부모 성분
const value = ref('');
// provide value
provive('value', value);
자성분
// inject value
const value = inject('value');
<input v-modelValue="value" />
언급URL : https://stackoverflow.com/questions/47311936/v-model-and-child-components
'IT' 카테고리의 다른 글
| C Profiler 권장사항 (0) | 2023.01.01 |
|---|---|
| Larabel 5+에서 클라이언트 IP 주소를 얻는 방법 (0) | 2023.01.01 |
| Java에서 로컬 변수 스레드가 안전한 이유 (0) | 2023.01.01 |
| 테이블에 스프링 부트 JPA 삽입(대문자 이름, 휴지 상태) (0) | 2023.01.01 |
| Vuex + 타입 스크립트 (0) | 2023.01.01 |