快捷導(dǎo)航

vue3+element-plus props中的變量使用 v-model 報錯及解決方案

更新時間：2023年10月16日 10:51:54 作者：Yriaf@2022

這篇文章主要介紹了vue3+element-plus props中的變量使用 v-model 報錯及解決方案,prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

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<{
  // 彈出框的標(biāo)題
  title: string,
  //   控制彈出框的顯示與隱藏
  visiable: boolean
}>();
let emits = defineEmits(['update:visiable'])
let handleClick = () => {
    emits('update:visiable',!props.visiable)
};

// 監(jiān)聽visible的變化
watch(() =>props.visiable,val => {
    emits('update:visiable',val)
    console.log(val)
})
</script>

<style>
</style>

在el-dialog組件上的v-model綁定的值是props中父組件傳過來的，報以下錯誤：

在這里插入圖片描述

解決方案：

prop 是單向數(shù)據(jù)流，這里只能用:model-value，不能用v-model

到此這篇關(guān)于vue3+element-plus props中的變量使用 v-model 報錯及解決方案的文章就介紹到這了,更多相關(guān)vue3+element-plus使用 v-model 報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue單頁面應(yīng)用做預(yù)渲染的方法實例
vue是一個單頁面的應(yīng)用,這導(dǎo)致一些爬蟲和百度無法搜索到,如果你想針對你應(yīng)用的其中某些頁面進(jìn)行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進(jìn)行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下
2021-10-10
elementui如何解決el-table重復(fù)寫loading問題
這篇文章主要介紹了elementui如何解決el-table重復(fù)寫loading問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
VUE中常用的4種高級方法
provide/inject 是 Vue.js 中用于跨組件傳遞數(shù)據(jù)的一種高級技術(shù)，它可以將數(shù)據(jù)注入到一個組件中，然后讓它的所有子孫組件都可以訪問到這個數(shù)據(jù)，這篇文章主要介紹了VUE中常用的4種高級方法,需要的朋友可以參考下
2023-05-05
Vue的三種路由模式總結(jié)
這篇文章主要介紹了Vue的三種路由模式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
如何使用Vue做個簡單的比較兩個數(shù)字大小頁面
這篇文章主要給大家介紹了關(guān)于如何使用Vue做個簡單的比較兩個數(shù)字大小頁面的相關(guān)資料,實現(xiàn)一個比較兩個數(shù)字大小的頁面，練習(xí)Vue實例的創(chuàng)建、數(shù)據(jù)綁定和事件監(jiān)聽方法,需要的朋友可以參考下
2023-10-10
vue3使用particles插件實現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Vue模擬數(shù)據(jù),實現(xiàn)路由進(jìn)入商品詳情頁面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實現(xiàn)路由進(jìn)入商品詳情頁面的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue.prototype和vue.use的區(qū)別和注意點小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點小結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
詳解vuex之store源碼簡單解析
這篇文章主要介紹了詳解vuex之store源碼簡單解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
詳解使用element-ui table組件的篩選功能的一個小坑
在element ui 框架中，對于table框架，有一個篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個小坑，非常具有實用價值，需要的朋友可以參考下
2018-11-11