溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Vue3組件間傳值避坑方法有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
我們通過一個計(jì)數(shù)器組件來演示這個坑，當(dāng)想對父組件傳遞過來的值做操作時(shí)，發(fā)現(xiàn)操作無效，先看代碼：
<!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>在上面的代碼中，我們定義了一個counter組件接收父組件的一個count值，當(dāng)點(diǎn)擊這個顯示的值時(shí)，我們做加一操作。這時(shí)候我們運(yùn)行代碼會發(fā)現(xiàn)，我們的值并不會完成加一操作，而是會報(bào)父組件傳遞過來的值是只讀的：
那假如我們要完成這個加一的功能怎么辦呢？答案就是我們復(fù)制一份父組件傳遞過來的值，對我們自己的值進(jìn)行操作：
<!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>這時(shí)候我們再運(yùn)行代碼就會發(fā)現(xiàn)我們可以做加一操作了：
當(dāng)我們定義一個單詞名稱比較長的屬性，并且用“-”分隔符連接的時(shí)候，子組件無法接收到正確的值，顯示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這個屬性在父組件和子組件之間傳值，按照我們的理解，應(yīng)該是能傳遞成功的，但是顯示的結(jié)果卻不正確
上面到坑也是VUE中的單向數(shù)據(jù)流的概念，即子組件可以使用父組件傳遞過來的數(shù)據(jù)，但是不能修改父組件傳遞過來的數(shù)據(jù)
當(dāng)我們定義的屬性值中有用“-”分隔符分隔時(shí)，我們在接收值的時(shí)候，需要將屬性名改成駝峰命名的方式，如上面的例子中父組件使用content-helloworld傳遞值到子組件，那么子組件接收到時(shí)候應(yīng)該將其改成駝峰命名方式：使用contentHelloworld接收
<!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組件間傳值避坑方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼