Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?-Vue.js-php.cn

Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?

WBOY

リリース： 2023-05-15 08:34:05

転載

1166 人が閲覧しました

インスタンス充填ピット

ピット 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(&#39;counter&#39;,{
       props: [&#39;count&#39;],
      template: `<div @click="count+=1">{{count}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

ログイン後にコピー

上記のコードでは、カウンターコンポーネントを定義しています。親コンポーネントからカウント値を受け取り、表示された値をクリックするとインクリメント操作を実行します。この時点でコードを実行すると、値がインクリメント操作を完了していないことがわかりますが、親コンポーネントによって渡された値が読み取り専用であることが報告されます:

Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?

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(&#39;counter&#39;,{
       props: [&#39;count&#39;],
       data(){
        return{
            mCount:this.count
        }
       },
      template: `<div @click="mCount+=1">{{mCount}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

ログイン後にコピー

コードを再度実行すると、1 つ追加できることがわかります:

Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?

ピット 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(&#39;test&#39;,{
       props: [&#39;content-helloworld&#39;],
      template: `<div>{{content-helloworld}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

ログイン後にコピー

上記のコードでは、content-helloworld 属性を使用して、親コンポーネントと子コンポーネントの間で値を転送します。転送は成功するはずですが、表示される結果は正しくありません

Vue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?

#上記の落とし穴は、VUE の一方向データフローの概念でもあります。親コンポーネントから渡されたデータを使用しますが、親コンポーネントから渡されたデータは変更できません

2. 充填時間

定義する属性値が「-」で区切られている場合値を受け取ったら、属性名をキャメルケースの命名方法に変更する必要があります。たとえば、上記の例では、親コンポーネントは

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(&#39;test&#39;,{
       props: [&#39;contentHelloworld&#39;],
      template: `<div>{{contentHelloworld}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

ログイン後にコピー

を使用して、値が正しく表示されるようにします

以上がVue3 コンポーネント間で値を受け渡す際の落とし穴を回避する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。