vue3使用defineModel实现父子组件双向绑定
更新时间：2024年01月11日 10:00:02 作者：一天只码五十行
这篇文章主要个给大家介绍了在vue3中使用defineModel进行父子组件中的双向绑定,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
在vue3.4版本中，defineModel进入稳定版。我们可以使用defineModel来优化父子组件中的双向绑定。在3.3之前的版本中，双向绑定需要在使用props和emits传值，现在我们只需要一行代码就可以解决这个问题：const 变量名=defineModel()
在子组件Helloworld.vue中：
<template>
<div class="page">
<input
type="text"
:value="fonts"
@input="(e:any) => (fonts= e.target.value)"
size="large"
class="inputBox"
/>
</div>
</template>
<script lang="ts" setup>
import { defineModel } from "vue";
const fonts = defineModel();
</script>
<style scoped lang="less">
.page {
width: 600px;
height: 150px;
}
</style>在父组件中：
<template>
<div class="home">
<div class="mian">
<div class="text">{{ fonts }}</div>
<HelloWorld v-model="fonts" />
</div>
</div>
</template>
<script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
const fonts = ref<string>("aaa");
</script>
<style>
.home {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>再看看效果
以上就是vue3使用defineModel实现父子组件双向绑定的详细内容，更多关于vue3 defineModel父子组件绑定的资料请关注脚本之家其它相关文章！
相关文章
为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,下面这篇文章主要给大家介绍了关于手把手带你使用vue+node作后端连接数据库的相关资料,需要的朋友可以参考下2023-03-03
Vue CLI是一个用于快速Vue.js开发的完整系统。这篇文章主要介绍了Vue Cli3 创建项目的方法步骤，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue中关于_ob_:observer的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在开发Web应用程序时，常常需要进行登录验证和权限管理，本文主要介绍了vue登录路由权限管理的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Vue实现todolist删除功能,，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下2023-05-05
代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理,将数据存储到form对象的相应属性中,方便数据提交,这篇文章主要介绍了v-distpicker地区选择器组件使用,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue中mint-ui的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
最新评论