Vue.js适用记录

（1）vue 一次清空组件中data里的数据

如果结合element UI使用，可使用ele官方提供的重置表单方法

 this.$refs[formName].resetFields();

初始化组件中的所有数据

Object.assign(this.$data,this.$options.data())

初始化组件中某个对象中的数据

Object.assign(this.$data.form,this.$options.data().form)

※ assign需要慎用，当页面使用全局变量如posView:this.$store.getters["user/posView"]时，用assign会报错。此时可使用下面的方法：

Object.keys( 待清空对象 ).forEach(key => ( 待清空对象[key] = '' ));
//如：清空uploadFrom对象
let form={a:1,b:2}
Object.keys(form).forEach(key => (form[key] = ''));

 

（2）子组件向父组件传值（this.$emit()方法）

this.$emit('input',this.value)

详情参考：vue-自定义事件之—— 子组件修改父组件的值

 

（3）vue 页面跳转传值的两种情况

1.params 传参 : 相当于post请求，跳转时参数不会在地址栏中显示

this.$router.push({
    name:'B页面名称',
    params: {id:params}
})

接收参数：

this.$route.params.id

2.query 传参 : 相当于get请求，页面跳转时参数会在地址栏中显示

this.$router.push({
    name:'B页面名称',
    query: { id:params }
})

接收参数：

this.$route.query.id

参考： https://blog.csdn.net/weixin_43836052/article/details/95166345

 

（4）vue批量清空对象值（不删除属性）

方法一：

Object.keys(xxx).forEach(key => (xxx[key] = ""))

方法二：

// 初始化所有数据：
Object.assign(this.$data,this.$options.data())
// 初始化某个对象中的数据：
Object.assign(this.$data.xxx,this.$options.data().xxx)

例：

Object.keys(this.Accounts.item).forEach(key => (this.Accounts.item[key] = ""))
Object.assign(this.$data.Accounts.item,this.$options.data().Accounts.item)

 

（5）vue 返回上一页 

1、返回上一页

$router.back(-1) 
//或者 
this.$router.go(-1);

2、刷新当前页

this.$router.go(0);

 

（6）Vue监听对象中属性

1、用watch监听一个变量

 

详情参考：Vue使用watch监听一个对象中的属性