vue3+element-plus props中的变量使用 v-model 报错及解决方案

 更新时间:2023年10月16日 10:51:54   作者:Yriaf@2022  
这篇文章主要介绍了vue3+element-plus props中的变量使用 v-model 报错及解决方案,prop 是单向数据流,这里只能用:model-value,不能用v-model,本文给大家介绍的非常详细,需要的朋友可以参考下

vue3+element-plus props中的变量使用 v-model 报错

<template>
  <el-button @click="handleClick" type="primary">
    <slot></slot>
  </el-button>
  <el-dialog :title="title" v-model="visiable">111</el-dialog>
</template>

<script lang="ts" setup>
import {watch} from 'vue'
let props = defineProps<{
  // 弹出框的标题
  title: string,
  //   控制弹出框的显示与隐藏
  visiable: boolean
}>();
let emits = defineEmits(['update:visiable'])
let handleClick = () => {
    emits('update:visiable',!props.visiable)
};

// 监听visible的变化
watch(() =>props.visiable,val => {
    emits('update:visiable',val)
    console.log(val)
})
</script>

<style>
</style>

在el-dialog组件上的v-model绑定的值是props中父组件传过来的,报以下错误:

在这里插入图片描述

解决方案:

prop 是单向数据流,这里只能用:model-value,不能用v-model

到此这篇关于vue3+element-plus props中的变量使用 v-model 报错及解决方案的文章就介绍到这了,更多相关vue3+element-plus使用 v-model 报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue单页面应用做预渲染的方法实例

    Vue单页面应用做预渲染的方法实例

    vue是一个单页面的应用,这导致一些爬虫和百度无法搜索到,如果你想针对你应用的其中某些页面进行SEO优化,让他们可以被爬虫和百度搜索到,你可以进行预渲染操作,下面这篇文章主要给大家介绍了关于Vue单页面应用做预渲染的相关资料,需要的朋友可以参考下
    2021-10-10
  • elementui如何解决el-table重复写loading问题

    elementui如何解决el-table重复写loading问题

    这篇文章主要介绍了elementui如何解决el-table重复写loading问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • VUE中常用的4种高级方法

    VUE中常用的4种高级方法

    provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术,它可以将数据注入到一个组件中,然后让它的所有子孙组件都可以访问到这个数据,这篇文章主要介绍了VUE中常用的4种高级方法,需要的朋友可以参考下
    2023-05-05
  • Vue的三种路由模式总结

    Vue的三种路由模式总结

    这篇文章主要介绍了Vue的三种路由模式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 如何使用Vue做个简单的比较两个数字大小页面

    如何使用Vue做个简单的比较两个数字大小页面

    这篇文章主要给大家介绍了关于如何使用Vue做个简单的比较两个数字大小页面的相关资料,实现一个比较两个数字大小的页面,练习Vue实例的创建、数据绑定和事件监听方法,需要的朋友可以参考下
    2023-10-10
  • vue3使用particles插件实现粒子背景的方法详解

    vue3使用particles插件实现粒子背景的方法详解

    这篇文章主要为大家详细介绍了vue3使用particles插件实现粒子背景的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue模拟数据,实现路由进入商品详情页面的示例

    Vue模拟数据,实现路由进入商品详情页面的示例

    今天小编就为大家分享一篇Vue模拟数据,实现路由进入商品详情页面的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue.prototype和vue.use的区别和注意点小结

    vue.prototype和vue.use的区别和注意点小结

    这篇文章主要介绍了vue.prototype和vue.use的区别和注意点小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 详解vuex之store源码简单解析

    详解vuex之store源码简单解析

    这篇文章主要介绍了详解vuex之store源码简单解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 详解使用element-ui table组件的筛选功能的一个小坑

    详解使用element-ui table组件的筛选功能的一个小坑

    在element ui 框架中,对于table框架,有一个筛选功能,这篇文章主要介绍了详解使用element-ui table组件的筛选功能的一个小坑,非常具有实用价值,需要的朋友可以参考下
    2018-11-11

最新评论