search

Home >Web Front-end >Vue.js >What are the methods to avoid pitfalls when passing values ​​between Vue3 components?

What are the methods to avoid pitfalls when passing values ​​between Vue3 components?

WBOY
WBOYforward
2023-05-15 08:34:051174browse

    Instance filling pit

    Pit one

    1. Discover the sinkhole

    We demonstrate it through a counter component This pitfall is that when you want to operate on the value passed by the parent component, you find that the operation is invalid. Let's look at the code first: 

    <!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>

    In the above code, we define a counter component to receive a count value from the parent component. , when the displayed value is clicked, we perform an increment operation. When we run the code at this time, we will find that our value will not complete the increment operation, but will report that the value passed by the parent component is read-only:

    What are the methods to avoid pitfalls when passing values ​​between Vue3 components?

    2 . Filling time

    So what if we want to complete this plus one function? The answer is that we copy the value passed by the parent component and operate on our own value: 

    <!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>

    When we run the code again, we will find that we can add one:

    What are the methods to avoid pitfalls when passing values ​​between Vue3 components?

    Pit 2:

    1. Discover the sinkhole

    When we define an attribute with a long word name and connect it with the "-" separator Sometimes, the child component cannot receive the correct value and displays NaN. The code is as follows: 

    <!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>

    In the above code, we use the content-helloworld attribute to transfer values ​​between the parent component and the child component. According to our understanding, the transfer should be successful. , but the displayed result is incorrect

    What are the methods to avoid pitfalls when passing values ​​between Vue3 components?

    The above pitfall is also the concept of one-way data flow in VUE, that is, child components can use the data passed by the parent component, but The data passed by the parent component cannot be modified

    2. Filling time

    When the attribute values ​​we define are separated by "-" separators, when we receive the value, we need to Change the attribute name to camel case naming method. For example, in the above example, the parent component uses content-helloworld to pass the value to the child component. Then the child component should change it to camel case naming method when receiving it: use 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>

    so that the value can be displayed correctly

    What are the methods to avoid pitfalls when passing values ​​between Vue3 components?

    The above is the detailed content of What are the methods to avoid pitfalls when passing values ​​between Vue3 components?. For more information, please follow other related articles on the PHP Chinese website!

    Statement：
    This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete
    Previous article：How to use mock to simulate data problems in vite+vue3Next article：How to use mock to simulate data problems in vite+vue3

    Related articles

    See more