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父子组件绑定的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue利用mockjs编写假数据并应用,本文通过实例代码给大家详细讲解，对Vue mockjs数据相关知识感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要为大家介绍了tdesign vue初始化组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue中向data添加新属性的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue+echarts绘制折线图、柱状图和扇形图教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文给大家介绍了vue路由拦截的三种方法,全局前置守卫,路由独享守卫和全局后置钩子这三种方法,并通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下2022-02-02
这篇文章主要为大家介绍了Vue中的匿名插槽与具名插槽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue实现仿iPhone悬浮球的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家介绍了vue实现搜索关键词高亮的详细教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论