vue随记
1. 计算属性中定义的方法里面包括get和set方法,get方法根据其他属性值动态计算当前属性值,set方法监视当前属性变化,更新其他属性值
2. vue2和vue3 – 父子组件中,子组件不能直接修改父组件的值,需要通过$emit
方法修改父组件的值;子组件通过props接受父组件的属性,父组件修改时,子组件对应自动修改
如果父组件给子组件传递参数是:success
绑定的方法 ,子组件只能使用this.success()
, 不能使用this.$emit('success')
。
如果父组件给子组件传递参数是@success
绑定的方法 ,子组件只能使用this.$emit('success')
, 不能使用this.success()
。
总结:vue2和vue3
1、冒号传递的无论是方法还是属性(本质是属性),都只能使用this.直接访问,不能使用this.$emit访问
2、@传递的方法(@符号用于监听子组件发出的事件),只能使用this.$emit访问,不能使用this.直接访问
3、子组件的任何方法(包括一个方法中有调用父组件的方法),传递给父组件后,父组件也能直接使用
// 示例是vue2,vue3有同样的效果
// 父组件
<ChildVue :success="getSuccess" @success2="chanSuccess"></ChildVue>
getSuccess(success){
if(success){
success();
}
console.log('父组件1被调用啦')
},
chanSuccess(){
console.log('父组件2被调用啦')
}
// 子组件
<el-button @click="parMeHandle">点击调用父组件方法</el-button>
<el-button @click="parMeHandle2">按钮</el-button>
props:['success','success2'],
onhhh(){
this.success()
console.log('子组件被调用啦');
},
parMeHandle(){
this.success();
this.success(this.onhhh) //跟下面写法效果一样
this.success(this.onhhh())//跟上面写法效果一样
// this.$emit('success') // 报错
console.log('子组件被调用啦');
},
parMeHandle2(){
//this.success2(); // 报错
this.$emit('success2')
// this.$emit('success2',this.onhhh) //有参数时
console.log('子组件2被调用啦');
}
3. **computed计算属性,methods方法,watch监听区别:**这三者都可以定义方法,methods定义普通方法,watch在监听经常变化的属性时使用,computed只在相关的响应式依赖发生改时,计算属性才会重新求值,减少不必要的计算
4. 组件的使用,父组件通过$refs
调用子组件
5. 添加数据,使用插槽slot, slot-scope="text, record, index"
三个参数分别为当前行的值,当前行数据,行索引,使用这些可以快速获取数据并使用
6. 在转化时间格式时,表单不会自动转化,需要手动转化,使用Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象,使用此属性来转化时间格式,不修改原有数据
7. 使用filter(item=>item.name.indexOf(this.searchText)>-1)
实现模糊查询
8. Vue-cli(vue脚手架)在配置时可以选择性添加路由等,而且运行时不需要手动更改ip,会自动生成
9. 在使用vue create antd-demo
创建项目时,可选择性配置自定义文件
10. 在提交日期格式的数据时,需要转化数据格式,提交时把日期格式转化为字符串格式使用:
moment(time).format('YYYY-MM-DD HH:mm:ss')
,当需要获取数据时把字符串格式转为时间格式使用:moment(time, 'YYYY-MM-DD HH:mm:ss')
11. Record中包含一条数据中的所有属性,record.属性名
的方法可以获取属性值
12. Form表单,渲染数据时使用this.$nextTick( () => { this.form.setFieldsValue({name:“”"})});
将回调延迟到下次DOM更新循环之后执行,在修改数据之后立即使用它,然后等待DOM更新
13. SetFieldsValue()
设置表单值,resetFields()
重置表单值,在给表单赋值时,表单必须是可视的,而且赋值的数据要一一匹配field,用不到的不要赋值即可
14. 在查询之后不能把数据直接删除,需要保存完整数据以供下次查询