vue emit之Property or method “$$v“ is not defined的解決
Property or method “$$v“ is not defined
報(bào)錯(cuò)信息
[Vue warn]: Property or method "$$v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
場(chǎng)景重現(xiàn)
// 父組件
<DiyComp
v-model.trim="value" // 1.當(dāng)父組件加了.trim
></DiyComp>// 子組件
props: {
// 2.而子組件的v-modle又被自定義了(接收)
value: {
type: [Number, String],
default: '',
},
},
methods: {
emitValue(newVal) {
// 3.(返回)
this.$emit('input', newVal);
},
},解決辦法
去掉父組件的.tirm即可
// 父組件
<DiyComp
v-model="value" // 去掉.trim
></DiyComp>解決vue報(bào)錯(cuò) : Property or method “xxx“ is not defined on the instance but referenced during render
如何解決VUE中報(bào)錯(cuò) [Vue warn]: Property or method “xxx” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
Vue.component(
'component1', {
props: {
},
template: ``,
data:{
a:"章三",
b:"李四",
},
mounted() {
},
methods: {}
}
)
Vue.component(
'component2', {
props: {
},
template: ``,
data() {
return {
a:"章三",
b:"李四",
}
},
mounted() {},
methods: {}
}
)在使用vue組件中，組件要是個(gè)函數(shù)，即將data作為一個(gè)函數(shù)名、數(shù)據(jù)對(duì)象作為函數(shù)返回值來(lái)使用。因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例。
如果data仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！
通過(guò)提供data函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用data函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對(duì)象
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3全局配置Axios并解決跨域請(qǐng)求問(wèn)題示例詳解
axios 是一個(gè)基于promise的HTTP庫(kù),支持promise所有的API,本文給大家介紹Vue3全局配置Axios并解決跨域請(qǐng)求問(wèn)題,內(nèi)容從axios部署開始到解決跨域問(wèn)題,感興趣的朋友一起看看吧2023-11-11
vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue.js實(shí)現(xiàn)對(duì)視頻預(yù)覽的示例代碼
本文主要介紹了Vue.js實(shí)現(xiàn)對(duì)視頻預(yù)覽的示例代碼,通過(guò)監(jiān)聽文件選擇事件和使用FileReader API,可以實(shí)現(xiàn)視頻文件的預(yù)覽功能,感興趣的可以了解一下2025-01-01
vue2自定義組件通過(guò)rollup配置發(fā)布到npm的詳細(xì)步驟
這篇文章主要介紹了vue2自定義組件通過(guò)rollup配置發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
在Vue中，組件是構(gòu)建用戶界面的基本單位，封裝公共組件是一種良好的實(shí)踐，可以提高代碼的可復(fù)用性和可維護(hù)性，下面我們就來(lái)看看如何封裝一個(gè)公共的按鈕組件吧2023-08-08
VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法舉例
為了實(shí)現(xiàn)全屏滾動(dòng)效果,我們首先需要使用Vue.js框架搭建項(xiàng)目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue3?自定義圖片放大器效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
uniapp中如何基于vue3實(shí)現(xiàn)輸入驗(yàn)證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個(gè)手機(jī)驗(yàn)證碼輸入框組件,通過(guò)封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實(shí)現(xiàn)驗(yàn)證碼輸入功能,適合需要增加手機(jī)驗(yàn)證碼驗(yàn)證功能的開發(fā)者參考使用2024-09-09
Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解
這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11