1. 程式人生 > >vue父向子傳值

vue父向子傳值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子向父,父向子相互值</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{num}}
<counter :num="num" @incre = "increment"></counter>
</div>
    <script>
        Vue.component("counter",{
            template:`
            <button @click="increment">加{{num}}</button>
               `,
            props :['num'],
            methods:{
                increment(){
                    this.$emit("incre")
                }
            }
        })
        var vm = new Vue({
            el:"#app",
            data :{
                num :10
            },
            methods:{
                increment(){
                    this.num++;
                }
            }
        })
    </script>


</body>
</html>

 效果圖: