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>
