对于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,可以到小猿圈去寻找答案的,相信会给你满意的答复的。
|