vue常见问题(vue开发移动端问题总结1)

vue常见问题

vue_webpack_imported_moudle_70_.default.conponent is not a function

vue_webpack_imported_moudle_70_.default.conponent is not a function

封装组件出现这个问题 解决办法: 原因是vue.component....中单词拼错 ,在找不到问题的情况下可以直接复制这个"XXX"is not a function 中的"XXX"到自己的代码中查询问题

Invalid prop: type check failed for prop "value". Expected Array, got Object类似问题

Invalid prop: type check failed for prop "value". Expected Array, got Object

原因是在绑定数据的时候或者传值的时候应该绑定的类型和获取到的类型不一致,例如我这个报错就是想要获取到的数据类型是数组,但是得到的却是对象.因为是vue报错,所以可以直接根据报错的信息展开,找到问题所出现的位置.(https://blog.csdn.net/qq_41485414/article/details/90263613,这个网址是详解)

二维对象数据赋值后被修改的问题

这是本身定义的数据,在做提交等操作的时候需要用这个对象
request:
object = {
    'name':'zs',
    'age':'18',
    'form1':{
        'gender':'男',
        'brithday':'2020-01-06',
        'nation':'汉族'
    },
    'form2':{
        'marriage':'未婚',
        'tel':'13586598569'
    }
}
以下数据是拿到的后端返回数据
reponse:
data = {
    'name':'ls',
    'age':'20',
    'data1':{
        'gender':'nv',
        'brithday':'2020-01-20',
        'nation':'满族'
    },
    'data2':{
        'marriage':'已婚',
        'tel':'1805926598'
    }
}

拿到后端返回的数据以后要做"回显"的情况下通常是会直接赋值然后在做提交操作的时候就会出现本身要用的object.form1/2经过赋值以后不存在了,此时需要form1/2两个对象的时候可以这样操作
1.方法一:(/后端大佬推荐使用)
 object.form1 = object.data1
 object.form2 = object.data2
2.方法二:
var a = JSON.parse(JSON.stringify(object/).replace(/data1/g,"form1"));
这个方法不一定奏效,至少在我的vue项目中是没有奏效的,但是在我以上代码中是奏效的
3.方法三(针对vue项目)
this.$set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

父子组件双向数据绑定的问题

问题描述:
父组件中拿到后端返回数据以后,通过v-bind传递给子组件,同样子组件通过props接收传递过来的值
在做组件抽离的时候提交按钮在几个页面都用到了,然后我没有抽离到子组件中,这时候就导致了我不能使用this.$emit这个方法
解决办法:
在定义的子组件上写ref="name"
父组件在取值的使用this.$ref.name.props中接收值的名字.值就可以可以拿到子组件v-moudle双向绑定的值了

5.父组件传值给子组件以后子组件在created或者mounted中取不到父组件传递的值

问题描述:
父组件传值给子组件以后子组件在created或者mounted中取不到父组件传递的值
我出现这个问题的原因:
//我是通过请求以后获取到后端返回的数据,返回后赋值,但是我把赋值后的数据v-bind给了子组件,因为是请求的缘故,所以数据是异步获取的到,这时候我们也不知道啥时候后请求完成,所以我就会在子组件拿到空值
解决办法:
1.在子组件上使用 v-if判断要传递的值有没有,有的话再创建子组件
2.在子组件使用watch监控数据
A、第一个值handler：其值是一个回调函数，就是监听对象对话的时候需要执行的函数
B、第二个值deep：其值true 或者 false，是否深度监听（一般监听是不能监听到对象属性值变化的，数组除外）
C、第三个值immediate：其值 true 或者 false，是否以当前的初始值执行handle函数（当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。）。
watch: {
   // props中接收的对象
    obj:{
       //回调函数 
        handler(newVal, oldVal) {
            if(newVal){
                for(let k in this.data){
                    this.data[key]=newVal[key]
                ｝
            }
        },
    //其值true 或者 false，是否深度监听（一般监听是不能监听到对象属性值变化的，数组除外）
        deep:true,
   //immediate：其值 true 或者 false，是否以当前的初始值执行handle函数（当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行
        immediate:true   
    }

持续更新中...

由于做的公安系统的新项目,不能展示详细代码,我尽量描述问题,总结.

vue常见问题(vue开发移动端问题总结1)

猜你喜欢