鍍金池/ 問答/HTML/ vue中傳值問題

vue中傳值問題

<body>

    <div id="app">
        <p>總數(shù)：{{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未定義

回答
編輯回答
負我心

<input :value="value" @input="handleIncrease"/>

:value 意思是 把props里的value綁定 其實跟我們平時的

<input v-model="value" @input="handleIncrease"/>一樣

至于@input="handleIncrease" 是當input的值發(fā)生改變時，handleIncrease里的this.$emit('input')是改變props的值，使得有雙向綁定的效果

2017年10月7日 21:42
編輯回答
我甘愿

clipboard.png
我猜你這里是想寫一個props

2017年7月14日 08:46
編輯回答
吃藕丑

v-model只是語法糖，會默認吧value作為屬性傳入組件內(nèi)部，然后通過input的事件拋出value值，達到雙向綁定；

2017年7月22日 00:35
編輯回答
替身

你在data(){return{}}里面定義了value了嗎

2018年5月22日 18:15