脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3  v-model父子组件通信

Vue3 使用v-model实现父子组件通信的方法(常用在组件封装规范中)

 更新时间：2024年06月18日 09:35:32   作者：心潮的滴滴  
这篇文章主要介绍了Vue3 使用v-model实现父子组件通信(常用在组件封装规范中)的方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

历史小剧场

历史告诉我们，痞子就算混一辈子，也还是痞子，滑头，最后只能滑自己。长得帅，不能当饭吃。
成大器者的唯一要诀，是能吃亏。
吃亏就是占便宜，原先我不信，后来我信了，相当靠谱。----《明朝那些事儿》

概述

v-mode实现父子组件数据同步原理主要分为：

  • 父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值
  • 子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件

同步单个数据

父组件

<!--  -->
<template>
    <div>
        <!-- v-model用在HTML上 -->
        <!-- <input type="text" v-model="username"> -->
        <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> -->
        <h4>账号: {{ username }}</h4>
        <h4>密码: {{ pwd }}</h4>
        <!-- v-model用在自定义组件上 -->
        <!-- <XinchaoInput v-model:username="username" v-model:pwd="pwd" /> -->
        <XinchaoInput 
        :username="username"
        @update:username="username = $event" />
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';
const username = ref<string>("张三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {
    console.log(newValue)
})
</script>
<style lang="scss" scoped>
</style>

子组件

<!--  -->
<template>
    <div>
        <input type="text"
        :value="username"
        @input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" />
        <!-- <br>
        <input type="text"
        :value="pwd"
        @input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" /> -->
    </div>
</template>
<script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])
</script>
<style lang="scss" scoped>
input {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 2px;
    background-color: darkcyan;
    color: white;
}
</style>

同步多个数据

父组件

<!--  -->
<template>
    <div>
        <!-- v-model用在HTML上 -->
        <!-- <input type="text" v-model="username"> -->
        <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> -->
        <h4>账号: {{ username }}</h4>
        <h4>密码: {{ pwd }}</h4>
        <!-- v-model用在自定义组件上 -->
        <XinchaoInput v-model:username="username" v-model:pwd="pwd" />
        <!-- <XinchaoInput 
        :username="username"
        @update:username="username = $event" /> -->
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';
const username = ref<string>("张三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {
    console.log(newValue)
})
</script>
<style lang="scss" scoped>
</style>

子组件

<!--  -->
<template>
    <div>
        <input type="text"
        :value="username"
        @input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" />
        <br>
        <input type="text"
        :value="pwd"
        @input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" />
    </div>
</template>
<script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])
</script>
<style lang="scss" scoped>
input {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 2px;
    background-color: darkcyan;
    color: white;
}
</style>

到此这篇关于Vue3 使用v-model实现父子组件通信（常用在组件封装规范中）的文章就介绍到这了,更多相关Vue3 v-model父子组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue实现两种路由权限控制方式

    Vue实现两种路由权限控制方式

    路由权限控制常用于后台管理系统中，对不同业务人员能够访问的页面进行一个权限的限制。本文主要介绍了两种Vue 路由权限控制，具有一定的参考价值，感兴趣的可以了解一下
    2021-10-10
  • Vue中如何使用mock模拟数据

    Vue中如何使用mock模拟数据

    这篇文章主要介绍了Vue中如何使用mock模拟数据，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • Vue实现Excel预览功能使用场景示例详解

    Vue实现Excel预览功能使用场景示例详解

    这篇文章主要为大家介绍了Vue实现Excel预览功能使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue 导出文件,携带请求头token操作

    vue 导出文件,携带请求头token操作

    这篇文章主要介绍了vue 导出文件,携带请求头token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue使用原生swiper代码实例

    vue使用原生swiper代码实例

    这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Vue.js基础知识汇总

    Vue.js基础知识汇总

    Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。
    2016-04-04
  • vue解决跨域问题的几种常用方法(CORS)

    vue解决跨域问题的几种常用方法(CORS)

    在Vue中解决跨域问题有多种方法,今天通过本文给大家介绍几种比较常见的方法，对vue解决跨域问题感兴趣的朋友跟随小编一起看看吧
    2023-05-05
  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    Vue实现鼠标经过文字显示悬浮框效果的示例代码

    这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Vue3+Vite项目使用less的实现步骤

    Vue3+Vite项目使用less的实现步骤

    最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • 基于vue封装一个安全键盘组件

    基于vue封装一个安全键盘组件

    大部分中文应用弹出的默认键盘是简体中文输入法键盘,在输入用户名和密码的时候,如果使用简体中文输入法键盘,用户的输入记录会被缓存下来所以我们需要一个安全键盘,本文给大家介绍了如何基于vue封装一个安全键盘组件,需要的朋友可以参考下
    2023-12-12

最新评论