Vue 元件實現表單的雙向繫結
下面是一個簡單的貨幣輸入的自定義控制元件,來自https://cn.vuejs.org/v2/guide/components.html:
<body> <div id="currency-input"> <p>{{price}}</p> <currency-input v-model="price"></currency-input> </div> </body> <script> Vue.component('currency-input',{ template: '' + '<span>' + '$ <input ref="input" :value="value" @input="updateValue($event.target.value)">' + '</span>', props: ['value'], methods: { updateValue: function (value) { //去除空格,保留兩位小數 var formattedValue = value.trim().slice(0,value.indexOf('.') === -1 ? value.length : value.indexOf('.')+3); if(formattedValue !== value){ this.$refs.input.value = formattedValue; } this.$emit('input', Number(formattedValue)) } } }); new Vue({ el: "#currency-input", data: { price: 0 } })
關於這段程式碼,看的時候有一些疑問,把自己的理解記錄下來,有可能不準確,以後如果有新的理解再來更新
1、<currency-input v-model="price"></currency-input>v-model是用在<input>中的,元件中為什麼要用v-model?
元件 currency-input 實現的是輸入框元件,元件也可以依靠 v-model 實現雙向繫結。
2、this.$emit('input', Number(formattedValue))有什麼作用,為什麼改變輸入框文字後還要特地用 $emit 觸發 input 事件?
這是元件和<input>不同的地方,元件中為了使 v-model 生效,必須滿足兩個條件:接受一個 value 屬性
這是因為<inputv-model="something">是以下程式碼的語法糖:
<input v-bind:value="something" v-on:input="something = $event.target.value">3、模板中<input :value="value" >為什麼用 v-bind:value 不用 v-model?
v-model 與v-bind:value
的區別在於雙向資料繫結,<input> 中的 value 屬性來自父元件的傳值,而 Vue.js 規定元件的資料傳遞prop是單向的,子元件<input>不應該在內部改變prop。這裡如果使用了v-model,Vue會給如如下警告:
vue.js:482 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
這段文字解釋的很清楚:(子元件內)不允許直接改變prop,因為父元件重新渲染的時候,prop的值會被覆蓋。如果需要改變prop,可以基於prop的值,使用data或者computed屬性。