vue sync でエラーが発生した場合の対処方法

vue 同期エラーの解決策: 1. "<child-dialog :name.sync="userName"></child-Dialog> のようなコードを使用して、親コンポーネントによって渡されたデータを変更します。 "; 2. "" のようなコードを使用して、オブジェクトに転送する必要がある基本データ型の値を入力します。

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue 同期でエラーが発生した場合はどうすればよいですか?

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. 他のプロパティの双方向ボンディングのメソッド

オブジェクトの転送

基本的なデータ型の値を入れるこれはオブジェクトに転送する必要があります。オブジェクトの値がサブコンポーネントで変更されても、エラーは報告されません。原則として、オブジェクトは複合データ型であり、サブコンポーネントはそれを受け取ります。受信したオブジェクトとオブジェクト親コンポーネントによって渡されるコンポーネントは同じメモリ アドレスを共有するため、双方向ボンディングの効果を実現できます。

親コンポーネント

<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 中国語 Web サイトの他の関連記事を参照してください。