vue.js自定義元件實現v-model雙向資料繫結的示例程式碼
阿新 • • 發佈:2020-01-09
我們都清楚v-model其實就是vue的一個語法糖,用於在表單控制元件或者元件上建立雙向繫結。
//表單控制元件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input實現的效果是一樣的--> <input type="text" :value="name" @input="name=e.target.vlaue"/> <input type="checkBox" :checked="checked" @click=e.target.checked/> {{name}} </template> <script> export default{ data(){ return { name:"",checked:false,} } } </script>
vue中父子元件的props通訊都是單向的。父元件通過props向下傳值給子元件,子元件通過$emit觸發父元件中的方法。所以自定義元件是無法直接使用v-model來實現v-model雙向繫結的。那麼有什麼辦法可以實現呢?
//父元件 <template> <div> <c-input v-model="form.name"></c-input> <c-input v-model="form.password"></c-input> <!--上面的input等價於下面的input--> <!--<c-input :value="form.name" @input="form.name=e.target.value"/> <c-input :value="form.password" @input="form.password=e.target.value"/>--> </div> </template> <script> import cInput from "./components/Input" export default { components:{ cInput },data() { return { form:{ name:"",password:"" },} },} </script>
//子元件 cInput <template> <input type="text" :value="inputValue" @input="handleInput"> </template> <script> export default { props:{ value:{ type:String,default:"",required:true,data() { return { inputValue:this.value,methods:{ handleInput(e){ const value=e.target.value; this.inputValue=value; this.$emit("input",value); },} } </script>
根據上面的示例程式碼可以看出,子元件c-input上綁定了父元件form的值,在子元件中通過:value接收了這個值,然後我們在子元件中修改了這個值,並且通過$emit觸發了父元件中的input事件將修改的值又賦值給了form。
綜上就實現了自定義元件中的雙向資料繫結!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。