vue3+element-plus props中的变量使用 v-model 报错及解决方案
作者: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 报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
