vue中传值问题

<body>

    <div id="app">
        <p>总数：{{total}}</p>
        
            <my-component v-model="total">
                 </my-component>
            <button @click="handleGetTotal"></button>
    
    </div></body>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script><script>

    Vue.component('my-component',{
        prors:['value'],
        template:'<input :value="value" @input="handleIncrease"/>',
    
      methods:{
          handleIncrease:function(event){              
              this.$emit('input',event.target.value);
          },

      }
        
    });    var app=new Vue({
        el:'#app',
        data:{
            total:0
        },
        methods:{
            handleGetTotal:function(){                this.total--;
            }
        }
        
    })</script>

中间template:'<input :value="value" @input="handleIncrease"/>',这句话什么意思，这个value怎么来的，浏览器报错也说value未定义

斯蒂芬大帝

浏览 735回答 1

1回答

叮当猫咪

<input :value="value" @input="handleIncrease"/>:value 意思是把props里的value绑定其实跟我们平时的<input v-model="value" @input="handleIncrease"/>一样至于@input="handleIncrease" 是当input的值发生改变时，handleIncrease里的this.$emit('input')是改变props的值，使得有双向绑定的效果

0 0

随时随地看视频慕课网APP