vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案
vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)
<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<{ // 彈出框的標(biāo)題 title: string, // 控制彈出框的顯示與隱藏 visiable: boolean }>(); let emits = defineEmits(['update:visiable']) let handleClick = () => { emits('update:visiable',!props.visiable) }; // 監(jiān)聽(tīng)visible的變化 watch(() =>props.visiable,val => { emits('update:visiable',val) console.log(val) }) </script> <style> </style>
在el-dialog組件上的v-model綁定的值是props中父組件傳過(guò)來(lái)的,報(bào)以下錯(cuò)誤:
解決方案:
prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model
到此這篇關(guān)于vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案的文章就介紹到這了,更多相關(guān)vue3+element-plus使用 v-model 報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章

仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼

淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析

vue如何使用 Slot 分發(fā)內(nèi)容實(shí)例詳解

vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)