Rumah > Artikel > hujung hadapan web > Apakah kaedah untuk mengelakkan perangkap apabila menghantar nilai antara komponen Vue3?
Apakah kaedah untuk mengelakkan perangkap apabila menghantar nilai antara komponen Vue3?
- WBOYke hadapan
- 2023-05-15 08:34:051162semak imbas
Lubang pengisi instance
Pit 1
1 Menemui lubang benam
Kami menunjukkannya melalui komponen pembilang Ini perangkap ialah apabila anda ingin mengendalikan nilai yang diluluskan oleh komponen induk, anda mendapati bahawa operasi itu tidak sah Mari lihat kod dahulu:
<!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>Dalam kod di atas, kami mentakrifkan komponen pembilang kepada. terima nilai kiraan daripada komponen induk , apabila nilai yang dipaparkan diklik, kami menambah satu. Apabila kami menjalankan kod pada masa ini, kami akan mendapati bahawa nilai kami tidak akan melengkapkan operasi kenaikan, tetapi akan melaporkan bahawa nilai yang diluluskan oleh komponen induk adalah baca sahaja:
2 . Masa pengisian
Jadi bagaimana jika kita ingin menyelesaikan fungsi tambah satu ini? Jawapannya ialah kita menyalin nilai yang diluluskan oleh komponen induk dan beroperasi pada nilai kita sendiri:
<!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>Apabila kita menjalankan kod itu semula, kita akan mendapati bahawa kita boleh menambah satu:
Pit 2:
1 Temui lubang benam
Apabila kita mentakrifkan atribut dengan nama perkataan yang panjang dan menyambungkannya dengan pemisah "-" Kadang-kadang, komponen anak tidak boleh menerima nilai yang betul dan memaparkan NaN. Kodnya adalah seperti berikut:
<!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>Dalam kod di atas, kami menggunakan atribut content-helloworld untuk memindahkan nilai antara komponen induk dan komponen anak Menurut pemahaman kami, pemindahan harus berjaya. tetapi hasil yang dipaparkan adalah Tidak Betul
Perangkap di atas juga merupakan konsep aliran data sehala dalam VUE, iaitu komponen anak boleh menggunakan data yang diluluskan oleh induk komponen, tetapi tidak boleh mengubah suai data yang diluluskan oleh komponen induk
2. Masa pengisian
Apabila nilai atribut yang kita tentukan dipisahkan oleh pemisah "-", kita perlu menukar. nama atribut kepada kotak unta apabila menerima nilai Contohnya, dalam contoh di atas, komponen induk menggunakan content-helloworld untuk menghantar nilai kepada komponen anak Apabila komponen anak menerimanya, ia harus menukarnya kepada penamaan kotak unta : gunakan contentHelloworld untuk menerima
<!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>supaya nilainya Boleh dipaparkan dengan betul
Atas ialah kandungan terperinci Apakah kaedah untuk mengelakkan perangkap apabila menghantar nilai antara komponen Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!