首页 > 其他分享 >vue 自定义组件 实现v-model双向绑定

vue 自定义组件 实现v-model双向绑定

时间:2023-03-11 16:13:34浏览次数:42  
标签:... vue 自定义 newVal 组件 model modelValue

父组件:

<childComp v-model="aaa" />
<script>
...
data() {
    return {
        aaa: 123
    }
}
...
</script>

自定义组件:

childComp.vue

<script>
...
props: {
    modelValue: {
        type: Number,
        default: 999
    },
},
data() {
    return {
        newVal: 0,
    }
},
methods: {
    fun() {
        this.$emit('update:modelValue', this.newVal)
    }
}
...
</script>

 

标签:...,vue,自定义,newVal,组件,model,modelValue
From: https://www.cnblogs.com/myflowers/p/17206272.html

相关文章

  • 从vue生命周期中两个“不会保证”说起
    起因在mounted中使用ref获取一个节点中的子节点,有时会获取不到。vue2文档-生命周期文档中说明:mounted注意mounted不会保证所有的子组件也都被挂载完成。如果你希望......
  • vue2使用ECharts自适应大小
    1.安装监听容器大小变化的插件npminstallelement-resize-detector--save2.ECharts已经有重新绘制图表的函数 resize();<template><divid="home">......
  • 自定义返回接口类型
    ResponseResultpackagecom.mao.common;publicclassR<T>{//状态码IntegerresultCode;//具体结果Tresult;//响应的信息Stringre......
  • VUE+.NET应用系统的国际化-多语言词条服务
    上篇文章我们介绍了VUE+.NET应用系统的国际化-整体设计思路系统国际化改造整体设计思路如下:提供一个工具,识别前后端代码中的中文,形成多语言词条,按语言、界面、模块统一......
  • vue中执行异步函数async和await的用法
    在开发中,可能会遇到两个或多个函数异步执行的情况,对于Vue中函数的异步函数执行做了一个小总结,如下:异步执行使用async和await完成created(){this.init()},meth......
  • Vue实现div可拖动组件 并可操纵盒子大小
    Vue实现div可拖动组件并可操纵盒子大小借鉴文章:https://blog.csdn.net/qq_46103732/article/details/128902192场景:在pc端项目中会碰到弹框后多个页面重叠的场景,类似......
  • vue3请求编写规范
    vue3请求编写规范使用的是模块化的组件式API界面request(请求文件夹)总文件夹中包含了对应的接口文件xxxx.ts包含了管理最底层请求的request.ts包含了......
  • vue動態產生div及v-model數據綁定
    html模板遍歷會涉及到v-model對值的綁定,這里的思路是根據數組中的下標尋找對應行數據<divclass="row"v-for="item,indexinitems"><divclass="col-3">......
  • vue+leaflet示例:地图分屏对比展示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1)......
  • Vue————Vue v2.7.14 入口文件【二】
    前言按着我的习惯,拿到一个项目首先我会查看项目下的README.md其次查看package.json,这里也不例外看过README.md后,来看下package.json;GitHubgithubpage内容package.......