修飾符v-model與.sync有什麼不同?以下這篇文章跟大家聊聊v-model與.sync修飾符的差異,希望對大家有幫助!
在日常開發的過程中,v-model指令是常用到的,一般來說v-model指令在表單及元素上建立雙向資料綁定,但v-model本質上是語法糖。提到語法糖這裡就不得不提到另一個與v-model有相似功能的雙向綁定語法糖了,那就是.sync修飾符。這裡對兩者進行一下總結:
#1. 作用
#相信過使用過vue框架的朋友對這個指令不會感到陌生,v-model是用來進行<input>
、<textarea> </textarea>
、<select></select>
元素上資料的雙向綁定的。 (學習影片分享:vue影片教學)
例如:
<template> <div > <input v-model="value" type="text"/> //这里的v-model里面的value可以直接获取到用户的输入值 </div> </template> <script> export default { components: {}, data() { return { value:"", //这里定义的value变量可以直接将上面获取到的值进行操作 }; }, } </script> <style scoped> </style>
當我們在input框裡輸入了某個值的時候,下面data裡的value就可以直接後去到我們輸入的值,而不需要操作dom元素來取得。
1. 本質
v-model本質上來說是一個語法糖,我們習慣性的寫法是這樣的:
<input v-model="value" type="text"/>
但是實際上完整的寫法是這樣的:
<input :value="value" @input="value=$event.target.value" type="text" />
透過對比語法糖和原始寫法可以得出:
再給<input/>
元素加入v-model屬性時,預設會把value當作元素的屬性,然後把input
事件當作即時傳遞value的觸發事件。
注意:不是所有能進行雙向資料綁定的元素都是input事件!
3、特殊用法
#在一般情況下,我們使用v-model主要是用於資料的雙向綁定,可以十分方便的取得到使用者輸入的值,但在某些特殊情況下,我們也可以將v-model用於父子元件之間資料的雙向綁定。
<template> <div class="father"> <Son v-model="str"/> </div> </template> <script> import Son from '@/components/Son.vue'; //引入子组件 export default { components: {Son}, data() { return { str:"father" }; }, } </script>
這裡定義了一個father元件和son元件,並且將son元件引入father元件中,給son元件綁定了v-model進行了傳值。此時我們需要在son元件中接收並使用這個值:
<template> <div class="son"> 我是在son组件里接收到的值:{{value}} </div> </template> <script> export default { components: {}, props:{ value:{ type:String, }, }, } </script>
注意:這裡接受的值必須是value,寫成其他名字將會報錯!
父元件向子元件傳值,子元件中是無法直接修修改資料的,直接修改的話就會報錯
當我們需要修改這個值時,就需要再將其傳入到父元件中修改。
這就需要在父元件中的子元件上定義一個自訂事件,透過子元件$emit('自訂事件名稱','值')
的方法將值傳入父組件。
但是在這裡我們不能使用自訂事件,因為我們用的是v-model傳值,所以我們只能使用input事件來修改。
子元件中使用$emit()
方法.呼叫父元件中的事件,並且進行傳值
<template> <div class="son"> 我是在son组件里接收到的值:{{value}} <button @click="handleClick">click</button> </div> </template> <script> export default { components: {}, data() { return { str:'son' }; }, props:{ value:{ type:String, }, }, methods: { handleClick(){ this.$emit('input',this.str) } }, } </script>
這樣就完成父子元件之間的資料雙向綁定效果
#1、作用
##.sync修飾符可以實現父子元件之間的雙向綁定,並且可以實現子元件同步修改父組件的值,相比較與v-model來說,
sync修飾符就簡單很多了:
2、本質
//正常父传子 <Son :a="num" /> //加上sync之后的父传子 <Son :a.sync="num" /> //它等价于 <Son :a="num" @update:a="val=>a=val" /> //相当于多了一个事件监听,事件名是update:a, //回调函数中,会把接收到的值赋值给属性绑定的数据项中。
update:屬性名稱,事件名稱寫錯不會報錯,但那時也不會有任何改變,這點需要注意。
##還有就是,
v-model只能使用一次,.sync
可以使用多個。 【相關影片教學推薦:
、web前端入門】
以上是修飾符v-model與.sync有什麼不同?差異對比淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章!