Vue+ElementUI项目演练
代码笔记和相关分析
Login.vue
<template> <div class='login_box'> <!-- 在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,
直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。 通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例。 所以<children ref="children"></children>之后,可以通过this.$refs.children来访问children。
ref 有三种用法:
1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素
2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 prop属性:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的 -->
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
路由传参:两种方式
1、传递一个参数:<router-link to='productinfo/1'>,其中的1为传递的参数。但实际使用会有问题,第2次再点击相同页面,结果不对。
①先配置路由表参数,即设参。
{ path:'productinfo/:id', //在路由表中增加参数,配置参数后,如果不加参数,是访问不到对应页面的
name:'productinfo', component:ProductInfo }
②、传参
<el-menu-item index="productinfo/1">商品信息</el-menu-item> //传参直接用index,实际证明是不可行的
<el-menu-item><router-link to='productinfo/1'>商品信息</router-link></el-menu-item>
③、接参
{{this.$route.params.id}}
2、通过对象的形式传递参数,实际证明好用,多次点击没有问题。
第①和第③和以上相同,第②改为,同时注意,路由表配置时,必须增加name:productinfo才行。
<el-menu-item><router-link :to="{name:'productinfo',params:{id:1001}}">商品信息</router-link></el-menu-item>
嵌套路由
<el-menu-item index="productList">商品列表</el-menu-item>这种方式还是容易有问题,有时会把productList的名字带下来。
所以还是应该用router-link to=''的方式。