Vue 中父子组件之间的 v-model 双向绑定

最新推荐文章于 2025-06-13 11:27:23 发布

qitiandada

最新推荐文章于 2025-06-13 11:27:23 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/qitiandada/article/details/104340701

本文介绍了在Vue中如何实现父子组件间的v-model双向绑定，通过value和@input模拟v-model功能，并结合vant弹框组件展示了实际应用场景，详细解释了如何在子组件中改变值并让父组件响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父子嵌套关系的双向绑定

简而言之在父组件改变值会响应到子组件在子组件中改变也会响应到父组件中

v-model ‘解体’

v-model 的双向绑定功能可以用 value 和 @input 来模拟

演示v-model 的解体功能

父组件

引入子组件在子组件上利用双向绑定这里的v-model 可以理解为：value =“an” @input="$emit.target.value"

<template>
  <div>
<son-zi v-model="an"></son-zi>
  </div>
</template>

<script>
import sonZi from './son.vue'
  export default {
      data() {
          return {
              an: 1000
          }
      },
      components: {
          sonZi
      }
}
</script>

<style lang="less" scoped>
</style>

子组件

接受父组件传递过来的值并且再传递过去，这样即使在子组件中改变这个值父组件也会响应

<template>
  <div>
<v-input :value="value" @input="$emit.target.value">
</v-input>
  </div>
</template>

<script>
  export default {
      props: ['value']
}
</script>

<style lang="less" scoped>
</style>

下面用vue 中 vant的弹框组件来掩饰

需求点击按钮显示弹框但是弹框插件时独立的。点击按钮按钮给弹框传值再点击旁边弹框按钮又会使 value 变为 false 返回值给按钮组件使按钮组件的 an 变为false

弹框插件

<template>
<!-- 不感兴趣组件 -->
<van-dialog
:value="value"
@input="$emit('input')"
 :show-confirm-button="false"
  close-on-click-overlay
 show-cancel-button>
</van-dialog>
<!-- 这里面 ：value 和 @input 是 v-model的解体   -->
<!-- ： value 是传递过来的值  而  @input 是向父级响应的值 -->
 <!-- :show-confirm-button="false"  // 不显示 “确定” 按钮 -->
  <!-- close-on-click-overlay // 点击旁处关闭对话框 -->
</template>

<script>
export default {
 
  props: {
    value: {
      type: Boolean,
      default: false // 默认值
    }
  }
}
</script>

<style lang="less" scoped>
</style>

按钮组件


   <template>
<dis-like v-model="an"></dis-like>
</template>
<script>
import disLike from './dislike.vue'
export default {
  data () {
    return {
      an: false
    }
  },
 components: {
    disLike
  },
}
</script>

<style lang="less" scoped>
</style>