"와 같은 상위 구성 요소에서 전달한 데이터를 수정합니다. 2. 기본 데이터 유형을 변경합니다. 전달해야 합니다. 값은 ""와 같은 코드를 사용하여 개체에 입력됩니다."/> "와 같은 상위 구성 요소에서 전달한 데이터를 수정합니다. 2. 기본 데이터 유형을 변경합니다. 전달해야 합니다. 값은 ""와 같은 코드를 사용하여 개체에 입력됩니다.">

 >  기사  >  웹 프론트엔드  >  Vue sync에 오류가 있는 경우 어떻게 해야 하나요?

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

藏色散人
藏色散人원래의
2022-12-26 16:25:082482검색

Vue 동기화 오류 해결 방법: 1. 상위 구성 요소에서 전달한 데이터를 수정합니다. 코드는 "7775bc57efe62a2a8e3da8010688384bb8522385beb601be7cd27479a3f20ae7"와 같습니다. 필수 변경 전달된 기본 데이터 유형 값은 "250240bd72f2d14ca1b5746de1662c35b8522385beb601be7cd27479a3f20ae7"와 같은 코드를 사용하여 객체에 입력됩니다.

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

이 튜토리얼의 운영 환경: 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(&#39;update:name&#39;, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.