Vue sync에 오류가 있는 경우 어떻게 해야 하나요?

Vue 동기화 오류 해결 방법: 1. 상위 구성 요소에서 전달한 데이터를 수정합니다. 코드는 "<child-dialog :name.sync="userName"></child-Dialog>"와 같습니다. 필수 변경 전달된 기본 데이터 유형 값은 ""와 같은 코드를 사용하여 객체에 입력됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.

vue sync가 잘못되면 어떻게 해야 하나요?

Vue modifier.sync(오류 보고에 대한 솔루션이므로 prop을 직접 변경하지 마세요.)

머리말

우리 모두는 하위 구성 요소가 상위 구성 요소에 의해 전달된 props를 수정하고 있다는 것을 알고 있습니다. 오류가 보고됩니다. , 아래와 같이

1. .sync

이란 무엇입니까? 상위-하위 구성 요소 간에 데이터를 수정하려면 상위-하위 구성 요소 통신, 상위-하위 통신이 필요합니다. 데이터를 하위 구성 요소에 바인딩하고 그런 다음 하위 구성 요소는 props를 사용하여 이를 수신합니다. 하위 구성 요소에서 상위 구성 요소로 전달하는 동안 상위 구성 요소는 구성 요소의 이벤트를 바인딩해야 하며 하위 구성 요소는 $emit를 사용하여 이벤트를 전달합니다. 이러한 데이터 수정은 작성하기가 약간 까다롭습니다. .sync 수정자는 상위 구성 요소를 수정하기 위한 여러 하위 구성 요소의 약어입니다. 데이터 작성 방법

2. .sync 사용

문법:

：props名称 . sync=“props值”
$emit( “ update：props名称 ” ,新值)

상위 구성 요소

<child-dialog :name.sync="userName"></child-Dialog>

하위 구성 요소

<el-button type="primary" @click="changeName(&#39;王五&#39;)">修改名字</el-button>

methods:{
changeName(newName){
//修改父组件传过来的数据
this.$emit('update:name', newName)
}
}

:name.sync修饰符其实是以下代码的缩写
@update:name="val => name= val"

3. 기타 props 양방향 결합 방식

객체 전달

전달해야 할 내용 전달 객체에 기본 데이터형 값을 넣으면 에서 객체의 값을 수정할 때 오류가 보고되지 않습니다. 하위 구성 요소가 받은 개체와 상위 구성 요소가 전달한 개체는 동일한 메모리 주소를 공유하는 것이 원칙입니다. 달성.

상위 구성 요소

<div>
<child-dialog :toChildObj="obj"></child-Dialog>
<p>
<span>名字：</span>{{name}}
</p>
</div>

export default {
data(){
return{
obj:{
name: "张三"
}
}
}
}

하위 구성 요소

<el-button type="primary" @click="changeName(&#39;王五&#39;)">修改名字</el-button>

export default {
props:{
toChildObj:{
type:Object,
default:{}
},
},
data(){
return{}
},
methods:{
changeName(newName){
//修改父组件传过来的数据
this.toChildObj.name = newName;
}
}
}

권장 학습: "vue.js 비디오 튜토리얼"

위 내용은 Vue sync에 오류가 있는 경우 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!