vue.js中有個v-model的語法,可以實現雙向綁定。
起初剛看到的時候,覺得很神奇。後面隨着對vue.js的熟悉。發現這個其實是vue官方給我們實現的一個語法糖。
使用v-model的時候,vue會綁定組件的value屬性,在自定義組件上使用v-model,然後瀏覽器審查元素,就會發現組件上做了一個vue屬性。
如果在組件做出修改的話,就可以直接發射一個input的事件,把對應的值彈出到外面,就實現了雙向綁定
v-model用不用input這個標籤其實都無所謂
父組件
<template> <div id="app"> <HelloWorld v-model="msg" /> <h1 style="color:green">{{msg}}</h1> <button @click="test()">ok</button> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "app", components: { HelloWorld }, data() { return { msg: 2 }; }, methods: { test() { this.msg -= 1; } } }; </script>
子組件
<template> <div class="hello"> <h1 v-bind:title="value" @click="close()">{{ value }}</h1> </div> </template> <script> export default { name: "HelloWorld", props: { value: Number }, data() { return { }; }, methods: { close() { this.num+=1; this.$emit("input", this.value+1); } } }; </script>
歡迎大家關注我的微信公衆號:web開發仔,
本公衆號的宗旨是以最簡短的文字,分享一些關鍵的web開發技術
技術範圍包括web前端後端,以及移動跨平臺開發