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>
