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详细的入门笔记,对Vue感兴趣的同学,可以参考下
    2021-05-05
  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中如何动态获取剩余区域的滚动高度

    vue中如何动态获取剩余区域的滚动高度

    这篇文章主要介绍了vue中如何动态获取剩余区域的滚动高度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 基于Vue uniapp实现贪吃蛇游戏

    基于Vue uniapp实现贪吃蛇游戏

    贪吃蛇游戏想必是很多70、80后的回忆,一直到现在也深受大家的喜欢。本文将利用Vue+uniapp实现这一经典的游戏,感兴趣的可以了解一下
    2022-04-04
  • element-plus按需引入后ElMessage与ElLoading在页面中的使用

    element-plus按需引入后ElMessage与ElLoading在页面中的使用

    这篇文章主要介绍了element-plus按需引入后ElMessage与ElLoading在页面中的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • axios的interceptors多次执行问题解决

    axios的interceptors多次执行问题解决

    这篇文章主要为大家介绍了axios中interceptors多次执行问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue过滤器filters的用法及时间戳转换问题

    Vue过滤器filters的用法及时间戳转换问题

    Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法,感兴趣的朋友一起看看吧
    2021-09-09
  • 详解如何在Vue3+TS的项目中使用NProgress进度条

    详解如何在Vue3+TS的项目中使用NProgress进度条

    本文主要介绍了详解如何在Vue3+TS的项目中使用NProgress进度条,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue3使用element-plus组件不显示问题

    Vue3使用element-plus组件不显示问题

    这篇文章主要介绍了Vue3使用element-plus组件不显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • elementUI实现级联选择器

    elementUI实现级联选择器

    这篇文章主要为大家详细介绍了elementUI实现级联选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论