vue学习15-自定义组件model使用 

<!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/dist/vue.js'></script>
 <title></title>
</head>
<body>
 <div id='app'>
    <Stepper v-model="counts"></Stepper>

 </div>
 <script>
    Vue.component("Stepper",{
      props:['count'],  
      model:{
        event:"count-chenged",
        prop:"count"
      },
      template:
      `
      <div>
        <button @click="substract">-</button>
        <span>{{count}}</span>
        <button @click="add">+</button>
      </div>
      `,
      methods:{
        substract(){
          this.$emit("count-chenged",this.count-1)
        },
        add(){
          this.$emit("count-chenged",this.count+1)

        }
      }
    })
    new Vue({
     el:'#app',
     data:{
      counts: 0,
     }
   }
)
</script>
</body>
</html>

　　

posted @ 2021-12-29 18:06  空谷近心  阅读(127)  评论(0)    收藏  举报