ホームページ > 記事 > ウェブフロントエンド > Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?
Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?
- WBOY転載
- 2023-05-15 08:34:051128ブラウズ
インスタンス充填ピット
ピット 1
1. 陥没穴を発見します
カウンター コンポーネントを通じてそれを実証しますこの落とし穴は、親コンポーネントによって渡された値を操作したいときに、その操作が無効であることがわかるということです。まずコードを見てみましょう:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num:0
}
},
template: `
<div>
<counter :count = "num"/>
</div>
`
});
// 定义一个test组件
app.component('counter',{
props: ['count'],
template: `<div @click="count+=1">{{count}}</div>`
});
const vm = app.mount('#root');
</script>
</html>上記のコードでは、カウンター コンポーネントを定義しています。親コンポーネントからカウント値を受け取り、表示された値をクリックするとインクリメント操作を実行します。この時点でコードを実行すると、値がインクリメント操作を完了していないことがわかりますが、親コンポーネントによって渡された値が読み取り専用であることが報告されます:
2 . 充填時間
それでは、このプラス 1 の機能を完了したい場合はどうすればよいでしょうか?答えは、親コンポーネントによって渡された値をコピーし、独自の値を操作することです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
num:0
}
},
template: `
<div>
<counter :count = "num"/>
</div>
`
});
// 定义一个test组件
app.component('counter',{
props: ['count'],
data(){
return{
mCount:this.count
}
},
template: `<div @click="mCount+=1">{{mCount}}</div>`
});
const vm = app.mount('#root');
</script>
</html>コードを再度実行すると、1 つ追加できることがわかります:
ピット 2:
1. シンクホールを発見する
長い単語名で属性を定義し、それを「-」区切り文字で接続すると、子コンポーネントは正しい値を受け取ることができず、NaN を表示します。コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content:"hello world"
}
},
template: `
<div>
<test :content-helloworld = "content"/>
</div>
`
});
// 定义一个test组件
app.component('test',{
props: ['content-helloworld'],
template: `<div>{{content-helloworld}}</div>`
});
const vm = app.mount('#root');
</script>
</html> 上記のコードでは、content-helloworld 属性を使用して、親コンポーネントと子コンポーネントの間で値を転送します。転送は成功するはずですが、表示される結果は正しくありません
content-helloworld を使用して値を子コンポーネントに渡します。次に、子コンポーネントは、値を受信するときにキャメルケースの命名方法に変更する必要があります: contentHelloworldReceive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>组件间传值</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content:"hello world"
}
},
template: `
<div>
<test :content-helloworld = "content"/>
</div>
`
});
// 定义一个test组件
app.component('test',{
props: ['contentHelloworld'],
template: `<div>{{contentHelloworld}}</div>`
});
const vm = app.mount('#root');
</script>
</html> を使用して、値が正しく表示されるようにします
##
以上がVue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。