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

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

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

Property or method “$$v“ is not defined

報錯信息

[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.

場景重現(xiàn)

// 父組件 
<DiyComp
    v-model.trim="value"  // 1.當父組件加了.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報錯 : Property or method “xxx“ is not defined on the instance but referenced during render

如何解決VUE中報錯 [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組件中，組件要是個函數(shù)，即將data作為一個函數(shù)名、數(shù)據(jù)對象作為函數(shù)返回值來使用。因為組件可能被用來創(chuàng)建多個實例。

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

通過提供data函數(shù)，每次創(chuàng)建一個新實例后，我們能夠調用data函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象