快捷導(dǎo)航

vue emit之Property or method “$$v“ is not defined的解決

更新時(shí)間：2023年06月05日 10:54:22 作者：喜樂的CC

這篇文章主要介紹了vue emit之Property or method “$$v“ is not defined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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ù)返回值來使用。因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。

如果data仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！

通過提供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)文章

vue實(shí)例配置對(duì)象中el、template、render的用法
這篇文章主要介紹了vue實(shí)例配置對(duì)象中el、template、render的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue.js 打包時(shí)出現(xiàn)空白頁和路徑錯(cuò)誤問題及解決方法
這篇文章主要介紹了vue.js 打包時(shí)出現(xiàn)空白頁和路徑錯(cuò)誤問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
解決vue多層彈框時(shí)存在遮擋問題
本文給大家介紹vue多層彈框時(shí)存在遮擋問題，解決思路首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽，然后修改z-index值，但是本思路只能解決首次問題，再次打開還會(huì)存在相同的問題，故該思路錯(cuò)誤，下面給大家?guī)硪环N正確的思路，一起看看吧
2022-03-03
vue混入mixin的介紹及理解
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)
2022-08-08
解決threeJS加載obj?gltf模型后顏色太暗的方法
這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
一篇文章讓你看懂封裝Axios
axios的封裝和api接口的統(tǒng)一管理,其實(shí)主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù),這篇文章主要給大家介紹了關(guān)于封裝Axios的相關(guān)資料,需要的朋友可以參考下
2022-01-01
詳解Vue基于vue-quill-editor富文本編輯器使用心得
這篇文章主要介紹了Vue基于vue-quill-editor富文本編輯器使用心得，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯(cuò)的完美解決
這篇文章主要介紹了vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯(cuò)的完美解決方案，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2020-09-09
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據(jù)的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下
2018-09-09
vue實(shí)現(xiàn)自定義多選按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義多選按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07