首页 > 其他分享> > vue子容器向父容器的通信

vue子容器向父容器的通信

2019-10-27 09:00:55 作者：互联网

<body>
<div id="app">
    <counter :num="count" @incr="add" @decr="reduce"></counter>

</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const  counter={
        template:
        `<div>
            <button @click="handleAdd">+</button>
            <button @click="handleReduce">-</button>
            <h1>{{num}}</h1>
        </div>`
        ,
        props:['num'],
        methods:{
            handleAdd(){
                this.$emit('incr')
            },
            handleReduce(){
                this.$emit('decr');
            }
        }
    }
   const app=new Vue({
       el:"#app",
       data:{
           count:0
       },
        components:{
           counter
        },
       methods:{
           add(){
               this.count++;
           },
           reduce(){
               this.count--;
           }
       }

   });
</script>


</body>

标签：count,容器,vue,const,methods,向父,app,counter,num
来源： https://blog.csdn.net/caoxuecheng001/article/details/102763675