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.

场景重现

// 父组件 
<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组件中，组件要是个函数，即将data作为一个函数名、数据对象作为函数返回值来使用。因为组件可能被用来创建多个实例。

如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！

通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论