【Web前端问题】vue中用++运算符修改props值与+1修改props的区别？代码如下：

Z时代
2024-01-10
分类：技术分享

在学习vue过程中，遇到如下问题，望道友帮帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中央事件bus</title>
</head>
<body>
    <div id="app">
        <div>{{coun}}</div>
        <addbtn :count="coun"></addbtn>
        <subbtn :count="coun"></subbtn>
    </div>
    <script src="./vue.js"></script>
    <script>
        var busVM = new Vue();
        var vm = new Vue({
            el:"#app",
            data:{
                coun:0
            },
            components:{
                'addbtn':{
                    template:`<button @click="addcount">+</button>`,
                    props:["count"],
                    methods:{
                        addcount(){
                            busVM.$emit("changeCount",++this.count);
                        }
                    }
                },
                'subbtn':{
                    template:`<button @click="subcount">-</button>`,
                    props:["count"],
                    methods:{
                        subcount(){
                            busVM.$emit("changeCount",this.count-1);
                        }
                    }
                }
            },
            mounted:function(){
                busVM.$on("changeCount",function(val){
                    this.coun = val
                }.bind(this))
            }
        });
    </script>
</body></html>