对于web前端来说组件是必不可少的东西之一，而且组件的多种多样，有时候让程序员也很是烦恼，对于一些不了解的组件使用起来也不是很顺畅，下面小猿圈web前端讲师就总结了v-model在组件中如何使用，希望对于学习前端中的你有所帮助。
其实v-model在组件中的使用感觉就是传值的过程，vue在传值过程中方式还是比较多的，比如event或者props等，只不过今天咱们重点来说一下v-model在组件中如何使用。
实现点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。
<!-- 父组件 -->
<template>
<p class="parent">
<p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
<Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
</script>
<!-- 子组件 -->
<template>
<p class="child">
<p>我是儿子，父亲对我说： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
props: {
give: String
},
model: {
prop: 'give',
event: 'returnBack'
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>
默认情况下，一个组件上的v-model会把value用作prop且把input用作event。
小猿圈web讲师提醒大家：每天学习一点技术问题，只要功夫深，铁杵磨成针，学习不是一朝一夕的，是需要付出行动的，而且还要坚持，学习新的技术需要不断的查阅资料，看视频，复习，练习，如果你工作中或者生活中遇到什么问题web前端自学②群：738735873，可以到小猿圈去寻找答案的，相信会给你满意的答复的。