vue如何在自定义组件中使用v-model

vue如何在自定义组件中使用如何在自定义组件中使用v-model

本篇文章主要介绍了vue如何在自定义组件中使用v-model，小编觉得挺不错的，现在分享给大家，也给大家做

个参考。一起跟随小编过来看看吧

v-model指令指令

所谓的“指令”其实就是扩展了HTML标签功能(属性)。

先来一个组件，不用vue-model，正常父子通信

<!-- parent -->

<template>

import Child from './Child.vue';

export default {

data() {

return {

sthGiveChild: '给你100块'

};

},

components: {

Child

},

</script>

<!-- child -->

<template>

<div class="child">

<p>我是儿子，父亲对我说： {{give}}</p>

<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>

</div>

</template>

<script>

export default {

}

}

}

</script>

点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。

改用改用v-model

<!-- parent -->

<template>

<div class="parent">

<p>我是父亲, 对儿子说： {{sthGiveChild}}</p>

data() {

return {

sthGiveChild: '给你100块'

};

},

components: {

Child