vue中工作总结

1.vue中数据向下传递时，无法使用@close方法清除

原因：传递的时候需要进行一波深拷贝

方法：JSON.parse(JSON.stringify(obj))

2.表格选择的时候无法再次点击取消

使用elementui的时候有选中按钮@row-click="aaa"接下来复写aaa方法

aaa(row){
this.selectRadio = row.id == this.selectRadio?false:row.id
this.selectObj = this.selectRadio?row''
}

3.监听工作使用方法

// watch能监听
var vue = new Vue({
    data:{
        a:1,
        b:[],
        c:{
            d:2,
            e:"3"
        },
        firstName: ''
    },
    methods:{
        clickMethod(){
            this.c.f=4      // 通过点方法给对象添加属性，这时候watch监听不到变化
            this.$set(this.c,"f",4)   // 通过$set方法添加属性，watch能监听到变化
        }
    },
    watch:{
        // 当a的值发生改变时触发
        a:function(val,oldVal){
            console.log('new:%s,old:%s',val,oldVal)
        }，
        // 数组长度发生变化时触发
        b:function(val,oldVal){
            console.log('new:%s,old:%s',val,oldVal)
        }，
        // 对象中的属性值发生变化时触发
        c:{
            handler: function (val, oldVal) {
                console.log('new:%s,old:%s',val,oldVal)
            },
            deep: true   // 深度监听，监听到更深层级值的变化
        },
        // 深度监听对性能影响较大，修改c里面任何一个属性都会触发这个监听器里的 handle。可以做如下处理：
        ‘c.d': {
            handler(newName, oldName) {
              console.log('obj.a changed');
            },
            immediate: true,
            // deep: true
        },
        // 上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性
        firstName: {
            handler(newName, oldName) {
              this.fullName = newName + ' ' + this.lastName;
            },
            // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
            immediate: true
        }
    }
})

4.父传子

//父页面中引用的子组件
<Son :msg="aaa" :user="bbb"></Son>//aaa和bbb是数据或数组，可传多个
//子组件页面接受
props:['msg','user']//data之外
//子页面引用
<p>{{msg}}<p>
<p>{{user}}<p>

//父组件中引入子组件，并且加入ref方式
<Son :ref="aaa"></Son>
//方法中传值进去
this.$refs.Son.name="ccc"
//子组件中要有name这个字段

5.子传父

//子方法里面写入
this.$emit('add',this.selectObj)
//父组件里面写入
<Son @add='addData'></Son>//add对应方法起的名字
//父方法里面获取并使用方法
addData(data){
this.name=data.name
}

6.使用Axios调用接口

//首先引入
import myAxios form 'Axios的地址'
//方法
export const aaa = (data) =>{//aaa是这个方法起的名称data是传入的值
return myAxios ({
url:接口的地址,
method:'post',//这里是看你的方法是post还是get
data,//get就使用params:data
})
}

7.深拷贝数据方法（这里用在查询按钮中）

//查询方法
searcInfo(){
let data = this.form
data['id'] = this.id
data['name'] = this.name
aaa.bbb(data).then((res)=>{//aaa和bbb分别是引入的js文件和js文件中的方法名
this.tableData = []
this.tableData = res.data.list
})
}
//深拷贝处理
submitForm(){//点击查看的时候触用的方法
this.pageNum = 1
this.pageSize = 10
this.form = deepCopyObject(this.form)//deepCopyObject是封装引用的方法
this.searcInfo()//换更新个form数据来调用
}

//deepCopyObject的方法
export function deepCopyObject(obj){
var res = JSON.parse(JSON.stringify(obj))
return res
}
注：深拷贝是拷贝了一个堆粒子数据，不会受其他的影响。浅拷贝的话数据会受其影响浅拷贝，
只拷贝了数据对象的一层数据，拷贝后的数据与原始数据还是有关联数组的concat、slice,对象的assign拷贝

秒客网

vue中工作总结

相关文章