Vue.js v-model原理(我的理解)
阿新 • • 發佈:2019-01-27
記得前幾天剛接觸vue.js,在官網的起步中看到一個示例
當時覺得很神奇,這個如果用js程式碼自己寫程式碼量肯定是不會少的,當時想著這個東西應該可以用在很多地 方但是我卻並沒有想去看一下他到底是如何實現的,但是今天我在用自定義元件做表單元件時使用v-model時出現了一些問題,於是乎去官網看了下文件(hhh可能是我腦子轉不過來,看了官網的文件我還是有一些不太理解於是去百度了很多的資料),下面就是我對v-model的理解
我們應該都知道v-model實現了檢視層與Vue中的data中model的資料雙向繫結,那麼他究竟是如何實現的呢?看圖:,其實v-model本質上是語法糖,這裡其實就可以看出一些東西了。
下面是程式碼演示:
父元件 <template> <div id="app"> <img src="./assets/logo.png"> <!--<router-view/>--> <car v-model="index"></car> <div>{{index}}</div> </div> </template> <script> import Car from "./car.vue" export default { data(){ return{ index:0 } }, name: 'App', components:{Car} } </script> 子元件 <template> <div @click="$emit('input',value+1)">糖果</div> </template> <script> export default{ props:["value"] } </script> 元件通過pros屬性接受它的父級的資料,那麼當前這個元件就是相對的子元件了,提供資料的就是父元件了。
它的原理是通過v-bind把父元件的資料繫結到子元件中props屬性中,通過監聽事件觸發$emit,而觸發的事件是input,子元件綁定了事件input相當於
< input @input=”??”>
觸發父控制元件的input,而出發這個監聽事件可以進行傳值,相當於這一行程式碼
v-on:input=”searchText = $event”
好了,明天見!嘻嘻