溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue3組件間傳值的坑有哪些及怎么解決

發(fā)布時(shí)間：2023-05-20 11:36:02 來源：億速云 閱讀：130 作者：iii 欄目：編程語言

這篇文章主要講解了“Vue3組件間傳值的坑有哪些及怎么解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue3組件間傳值的坑有哪些及怎么解決”吧！

    實(shí)例填坑

    坑一
    1. 發(fā)現(xiàn)天坑

    我們通過一個(gè)計(jì)數(shù)器組件來演示這個(gè)坑，當(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>
                ` 
    });
    // 定義一個(gè)test組件
    app.component('counter',{
       props: ['count'],
      template: `<div @click="count+=1">{{count}}</div>`
    });
    const vm = app.mount('#root');
</script>
</html>

    在上面的代碼中，我們定義了一個(gè)counter組件接收父組件的一個(gè)count值，當(dāng)點(diǎn)擊這個(gè)顯示的值時(shí)，我們做加一操作。這時(shí)候我們運(yùn)行代碼會發(fā)現(xiàn)，我們的值并不會完成加一操作，而是會報(bào)父組件傳遞過來的值是只讀的：

    Vue3組件間傳值的坑有哪些及怎么解決

    2. 填坑時(shí)刻

    那假如我們要完成這個(gè)加一的功能怎么辦呢？答案就是我們復(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>
                ` 
    });
    // 定義一個(gè)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)我們可以做加一操作了：

    Vue3組件間傳值的坑有哪些及怎么解決

    坑2:
    1.發(fā)現(xiàn)天坑

    當(dāng)我們定義一個(gè)單詞名稱比較長的屬性，并且用“-”分隔符連接的時(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>
                ` 
    });
    // 定義一個(gè)test組件
    app.component('test',{
       props: ['content-helloworld'],
      template: `<div>{{content-helloworld}}</div>`
    });
    const vm = app.mount('#root');
</script>
</html>

    在上面的代碼中，我們使用content-helloworld這個(gè)屬性在父組件和子組件之間傳值，按照我們的理解，應(yīng)該是能傳遞成功的，但是顯示的結(jié)果卻不正確

    Vue3組件間傳值的坑有哪些及怎么解決

    上面到坑也是VUE中的單向數(shù)據(jù)流的概念，即子組件可以使用父組件傳遞過來的數(shù)據(jù)，但是不能修改父組件傳遞過來的數(shù)據(jù)

    2.填坑時(shí)刻

    當(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>
                ` 
    });
    // 定義一個(gè)test組件
    app.component('test',{
       props: ['contentHelloworld'],
      template: `<div>{{contentHelloworld}}</div>`
    });
    const vm = app.mount('#root');
</script>
</html>

    這樣值就能正確顯示了

    Vue3組件間傳值的坑有哪些及怎么解決

    感謝各位的閱讀，以上就是“Vue3組件間傳值的坑有哪些及怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue3組件間傳值的坑有哪些及怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

    向AI問一下細(xì)節(jié)

    免責(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)容。

    AI
    助
    手