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.

场景重现

// 父组件 
<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函数,从而返回初始数据的一个全新副本数据对象

总结

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

相关文章

  • vue实例配置对象中el、template、render的用法

    vue实例配置对象中el、template、render的用法

    这篇文章主要介绍了vue实例配置对象中el、template、render的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue.js 打包时出现空白页和路径错误问题及解决方法

    vue.js 打包时出现空白页和路径错误问题及解决方法

    这篇文章主要介绍了vue.js 打包时出现空白页和路径错误问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 解决vue多层弹框时存在遮挡问题

    解决vue多层弹框时存在遮挡问题

    本文给大家介绍vue多层弹框时存在遮挡问题,解决思路首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误,下面给大家带来一种正确的思路,一起看看吧
    2022-03-03
  • vue混入mixin的介绍及理解

    vue混入mixin的介绍及理解

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-08-08
  • 解决threeJS加载obj gltf模型后颜色太暗的方法

    解决threeJS加载obj gltf模型后颜色太暗的方法

    这篇文章主要为大家介绍了解决threeJS加载obj gltf模型后颜色太暗的方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 一篇文章让你看懂封装Axios

    一篇文章让你看懂封装Axios

    axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护,这篇文章主要给大家介绍了关于封装Axios的相关资料,需要的朋友可以参考下
    2022-01-01
  • 详解Vue基于vue-quill-editor富文本编辑器使用心得

    详解Vue基于vue-quill-editor富文本编辑器使用心得

    这篇文章主要介绍了Vue基于vue-quill-editor富文本编辑器使用心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    这篇文章主要介绍了vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决方案,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-09-09
  • Vue的watch和computed方法的使用及区别介绍

    Vue的watch和computed方法的使用及区别介绍

    Vue的watch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vue的watch和computed方法的使用及区别,需要的朋友可以参考下
    2018-09-09
  • vue实现自定义多选按钮

    vue实现自定义多选按钮

    这篇文章主要为大家详细介绍了vue实现自定义多选按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07

最新评论