站長資訊網
        最全最豐富的資訊網站

        修飾符v-model與.sync有什么區別?差異對比淺析

        修飾符v-model與.sync有什么區別?下面本篇文章給大家聊聊v-model與.sync修飾符的差異,希望對大家有所幫助!

        修飾符v-model與.sync有什么區別?差異對比淺析

        在日常開發的過程中,v-model指令是經常用到的,一般來說v-model指令在表單及元素上創建雙向數據綁定,但v-model本質上是語法糖。提到語法糖這里就不得不提到另一個與v-model有相似功能的雙向綁定語法糖了,那就是.sync修飾符。在這里對兩者進行一下總結:

        一、v-model

        1. 作用

        相信過使用過vue框架的朋友對這個指令不會感到陌生,v-model是用來進行<input><textarea><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,寫成其他名字將會報錯!

        父組件向子組件傳值,子組件中是不能直接修修改數據的,直接修改的話就會報錯

        修飾符v-model與.sync有什么區別?差異對比淺析

        當我們需要修改這個值時,就需要再將其傳入到父組件中修改。

        這就需要在父組件中的子組件上定義一個自定義事件,通過子組件$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>

        這樣就完成父子組件之間的數據雙向綁定效果

        二、.sync修飾符

        1、作用

        .sync修飾符可以實現父子組件之間的雙向綁定,并且可以實現子組件同步修改父組件的值,相比較與v-model來說,sync修飾符就簡單很多了:

        2、本質

            //正常父傳子     <Son :a="num" />          //加上sync之后的父傳子     <Son :a.sync="num" />          //它等價于     <Son :a="num" @update:a="val=>a=val" />          //相當于多了一個事件監聽,事件名是update:a,     //回調函數中,會把接收到的值賦值給屬性綁定的數據項中。

        這里面的傳值與接收和正常的父組件向子組件傳值沒有區別,唯一的區別在于子組件往回傳值的時候$emit所調用的事件名必須是update:屬性名,事件名寫錯不會報錯,但那時也不會有任何改變,這點需要注意。

        總結

        v-model與.sync: 相同點:都是語法糖,都可以實現父子組件中的數據通信。

        不同點:格式不同,v-model="num" :num.sync="num"

        v-model:@input+value :num.sync:@update:num

        還有就是,v-model只能使用一次,.sync可以使用多個。

        【相關視頻教程推薦:vuejs入門教程、web前端入門】

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 久久精品人人做人人妻人人玩| 午夜精品视频在线| 国产精品成人观看视频免费| 亚洲精品NV久久久久久久久久| 影音先锋国产精品国语对白| 国产精品VA在线观看无码不卡| 日韩精品无码永久免费网站| 91午夜精品亚洲一区二区三区| 国产精品亚洲片在线| 伊人久久无码精品中文字幕| 精品无人区无码乱码大片国产| 亚洲精品自产拍在线观看动漫| 国产办公室秘书无码精品99| 亚洲精品成人无码中文毛片不卡| 精品久久人人做人人爽综合| 99久久国产综合精品网成人影院| 国产精品久久波多野结衣| 久久国产精品无码HDAV| 亚洲国产精品VA在线观看麻豆| 无码精品第一页| 久久久99精品一区二区| 国产午夜精品久久久久九九电影 | 蜜国产精品jk白丝AV网站| 欧美在线精品永久免费播放| 国产伦精品一区二区三区视频猫咪 | 97精品国产91久久久久久| 国产精品 羞羞答答在线| heyzo高无码国产精品| 久久久久国产精品熟女影院| 午夜精品久久久久久99热| 在线精品亚洲| 在线观看国产精品日韩av| 一本之道av不卡精品| 亚洲精品人成无码中文毛片| 欧美亚洲日本久久精品| 香蕉国产精品麻豆亚洲欧美日韩精品自拍欧美v国 | 欧美国产成人久久精品| 人妻精品久久久久中文字幕| 久久久WWW成人免费精品| 亚洲&#228;v永久无码精品天堂久久 | 国内精品久久久久久中文字幕|