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

小猿圈002

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