浅析v-model的原理及在自定义组件中的应用

最新推荐文章于 2024-08-16 15:49:18 发布

Dax1_

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量834

点赞数

分类专栏：前端学习日记文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Dax1_/article/details/122949622

版权

前端学习日记专栏收录该内容

162 篇文章 15 订阅

订阅专栏

本文详细介绍了Vue.js中v-model的原理，它实际上是v-bind和v-on的语法糖。在自定义组件中实现v-model双向绑定，需要组件接收一个props（如`visible`），并通过`@update:visible`（或通常的`@input`）事件将更新的值返回给父组件，从而达到数据同步的效果。这种方式使得自定义组件能够无缝集成到Vue的响应式系统中。

摘要由CSDN通过智能技术生成

v-model的双向绑定

v-model是v-bind和v-on配合使用的语法糖

<input v-model="value" />

// 就是相当于: 
<input :value="value" @input="value= $event.target.value" />

v-model在自定义组件中的使用

为了让我们的组件支持v-model双向绑定，组件需要接受一个props 并发出一个input事件。

// 父组件

<template>
  <div>
    <Dialog :visible="x" @update:visible="x = $event"></Dialog>
    <!--等价于-->
    <Dialog v-model:visible="x"></Dialog>
  </div>
</template>

// 子组件 Dialog

<script lang="ts">
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const close = () => {
      context.emit('update:visible', true)
    }
    return {close}
  }
};
</script>

在自定义组件中使用v-model，将visible的值传给子组件，子组件接收prop(visible)，同时，在利用update:visivle事件(一般使用input事件，这里是个人习惯)将值通过$emit,将值再传递给父组件，直接赋值给visible,这样就形成了自定义组件的一个双向数据绑定。