Vue组件中利用.sync修饰符实现对prop进行双向数据绑定

Myth丶恋晨 2022-05-19 08:58 162阅读 0赞

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

所以官方推荐以`update:my-prop-name` 的模式触发事件取而代之

为了好理解，我写了一个很简单的小例子：（单击输入框，显示或隐藏下面的box）

![点击输入框实现box的显示隐藏][box]

下面是完整的代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #app{
                margin:10px auto;
                width:200px;
                height:200px;}
            input{
                width:200px;
                height:30px;
                border:1px solid red;
                outline:none;
            }
            .show{
                width:200px;
                height:200px;
                background: orange;
                border:1px solid red;
                border-top:none;
            }
    
        </style>
        <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <costum-show :is-show.sync="isShow"></costum-show>
     <div class="show" v-show="isShow"></div>
    </div>
    <script>
        Vue.component('costum-show',{
            props:['isShow'],
            template:`
                 <div>
                      <input type="text" val="" @click="showHandle">
                 </div>
            `,
            methods:{
                showHandle(){
                    this.$emit("update:isShow",!this.isShow);
                }
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                isShow:false
            }
    
        })
    </script>
    </body>
    </html>

核心代码：

<costum-show :is-show.sync="isShow"></costum-show>

Vue.component('costum-show',{
            props:['isShow'],
            template:`
                 <div>
                      <input type="text" val="" @click="showHandle">
                 </div>
            `,
            methods:{
                showHandle(){
                    this.$emit("update:isShow",!this.isShow);
                }
            }
        })

![70][]

[box]: /images/20220519/e351d366c3e645e7a293c315fc9b48ef.png
[70]: /images/20220519/a4467433a4564518b1eaa94d92fd38c2.png