Vue2, vue3 구성 요소 전달 값, 참조 유형, 객체 배열 처리 방법
발췌
모든 소품은 부모 소품과 자식 소품 사이에 단일 하향 바인딩을 형성합니다. 부모 소품에 대한 업데이트는 자식 구성 요소로 내려오지만 그 반대는 아닙니다. 이렇게 하면 하위 구성요소에서 상위 구성요소로 실수로 변경되는 것을 방지할 수 있습니다...
다음 구성요소 값별 전달은 引用类型(배열 또는 개체) 값별 전달을 나타냅니다.
vue2와 vue3의 원리는 동일하니 문의사항이 있으시면 글 남겨주세요.
준비: 단방향 데이터 흐름
모든 소품은 부모 소품과 자식 소품 간의 관계를 형성합니다 单向下行绑定. 부모 소품에 대한 업데이트는 자식 구성 요소로 흐르지만 그 반대는 아닙니다. 이렇게 하면 앱의 데이터 흐름을 이해하기 어렵게 만들 수 있는 자식 구성 요소의 부모 구성 요소 상태가 실수로 변경되는 것을 방지할 수 있습니다.
또한 상위 구성 요소가 변경될 때마다 하위 구성 요소의 모든 소품이 최신 값으로 새로 고쳐집니다. 즉, 자식 구성 요소 내에서 소품을 변경 하면 안 됩니다. 이렇게 하면 Vue는 브라우저 콘솔에 경고를 표시합니다.
- 이 prop은 초기 값을 전달하는 데 사용되며 하위 구성 요소는 이를 로컬 prop 데이터로 사용할 것으로 예상합니다. 로컬 데이터 속성을 정의하고 이 소품을 초기 값으로 사용
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
- 이 prop은 원시 값으로 전달되며 변환해야 합니다. 이 소품의 값을 사용하여
计算属性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
개체 및 배열은 JavaScript에서 참조로 전달되므로 배열 또는 개체 유형 소품의 경우
子组件中改变变更这个对象或数组本身将会影响到父组件的状态.
질문
소품은 응용 프로그램 유형 데이터(객체, 배열)를 전송하고 하위 구성 요소의 변경 사항은 상위 구성 요소를 직접 변경합니다.
부모 컴포넌트 App.vue
<template>
<div id="app">
<child :initialValue="valueEmit">
</child>
</div>
</template>
<script>
import childEmit from './components/child.vue'
export default {
data () {
return {
valueEmit: {
cat: 2}
}
},
components: {
child
}
}
</script>
하위 구성 요소 구성 요소/child.vue
<template>
<div class="child-container">
<p>
<label>child：</label>
<input type="text" v-model="value.cat" />
</p>
</div>
</template>
<script>
export default {
name: 'child',
props: {
initialValue: Object
},
data () {
return {
value: this.initialValue
}
}
}
</script>
질문 2
부모 구성 요소에 영향을 주지 않고 자식 구성 요소 를 변경하려면 참조 유형 데이터의 전체 복사본을 만들 수 있지만 부모 구성 요소 데이터 변경은 자식 구성 요소가 응답하도록 트리거하지 않습니다 .
export default {
name: 'child',
props: {
initialValue: Object
},
data () {
return {
valueEmit: JSON.parse(JSON.stringify(this.initialValue))
}
}
}
요약하다
개발 과정에서 일반적으로 다음 세 가지 상황에 직면합니다.
纯展示부작용 없이 부모 구성 요소 속성을 직접 사용하십시오!
<template>
<div>
{
{
parentObj.value}}
</div>
</template>
<script>
export default {
name: 'child',
props: {
parentObj: Object
}
}
</script>
只子组件内部修改Object.assign(), 부모컴포넌트는 자식컴포넌트 데이터에 선언된 새로운 데이터를 수정하지 않고(즉, 부모컴포넌트는 초기화만 함) 참조는 또는 로 끊길 수 있다JSON.parse(JSON.stringify()).
<template>
<div>
<input type="text" v-model="childObj.value">
</div>
</template>
<script>
export default {
name: 'child',
props: {
parentObj: Object
},
data () {
return {
childObj: Object.assign({
}, this.parentObj)
}
}
}
</script>
父子组件都会修改계산 또는 감시에 의한 처리
<template>
<div>
<input type="text" v-model="childObj.value">
</div>
</template>
<script>
export default {
name: 'child',
props: {
parentObj: Object
},
computed: {
childObj () {
return Object.assign({
}, this.parentObj)
}
}
}
</script>
或者 watch 方式
export default {
name: 'child',
props: {
parentObj: Object
},
data () {
return {
childObj: {
}
}
},
watch: {
parentObj: {
handler (val, oldVal) {
if (val) {
this.childObj = Object.assign({
}, this.parentObj)
}
},
deep: true,
immediate: true
}
}
}
- watch와 compute의 차이점에 대하여: vue computed를 사용하는 올바른 방법