vue电商后台总结

1.页内跳转

左边是导航栏,右边页面跳转,

直接在路由处导入那个要展示的vue

点商品列表的按钮就会跳转如下地址

vue电商后台总结

此时是会跳转到新页面的

然后就和我这样子做

vue电商后台总结

展示图

vue电商后台总结

2.共用一个对话框

vue电商后台总结

在计算属性处,加一个函数.依据如此判断(特定),返回不同文字
vue电商后台总结

3.清除form表单中的输入项

注意: 需要完整 el-form及 form-item 组件中且配置 prop，不配置的执行此方法，该输入框值不会重置。

**this,$refs.addFormRef.resetFields() **

4.$ref用法

ref是被用来给元素或子组件注册引用信息的.引用信息将会注册在父组件的$refs对象上

:happy:

1、如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过== $ref可能获取到在子组件里定义的属性和方法==。 2、如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

父组件

vue电商后台总结

我的理解:

$ref对象是父组件的,所以可以访问父组件一些属性,在父组件中注册子组件,对子组件进项ref=“refName”,

在通过this,$ref.refName 来调用子组件的属性和方法

子组件

我是demo组件

结果
vue电商后台总结

然后是

validate表单验证规则

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段Function(callback: Function(boolean, object))。若不传入回调函数，则会返回一个 promise

var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000);
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert(‘submit!’);
} else {
console.log(‘error submit!!’);
return false;
}
});
}

}

题外:

说一下trigger里面的两个属性的意思，首先是blur是失去焦点进行判断，那么change就是数值改变进行判断，日期选择器就用change，输入框我建议用两个属性一起用效果更好
vue电商后台总结