深入研究v-model（实现父子组件数据同步）

最新推荐文章于 2023-12-25 17:50:53 发布

熊猫的猫

最新推荐文章于 2023-12-25 17:50:53 发布

阅读量452

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_73520343/article/details/126836735

版权

本文详细介绍了Vue中v-model指令的基本用法，包括如何实现数据的双向绑定，并演示了如何通过value和input事件实现父子组件间的通信。实例代码和原理剖析有助于理解Vue组件间数据共享的关键技术。

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

1.在Vue中v-model最简单最常用的数据双向绑定

它是Vue框架中的指令，主要结合表单元素一起使用（文本框，复选框等）

<template>
  <div>
    <!-- v-model数据双向绑定 -->
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:'今天也要加油'
    }
  },
}
</script>

实现效果

2.深入研究v-model

实现父子组件通信，即实现数据同步

实现原理：用value和input事件实现

父组件：

<!-- v-model 父子组件通信 
          :value是父组件传给子组件的props
          @input是自定义事件-->
    <child type="text" :value="msg" @inputmsg="msg=$event"/>
    <!-- 简写形式 -->
    <child v-model="msg"/>

子组件：

<template>
  <div>
     <!-- :value是动态属性
      @input是原生dom事件 
      接收的值是父组件传递的msg-->
    <input type="text" :value="value" @input="$emit('inputmsg',$event.target.value)">
    <span>{{value}}</span>
  </div>
</template>

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