小猿圈web前端之v-model在组件中如何使用

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

转载于:https://juejin.im/post/5cee50dd518825332550cda3