Vue+ElementUI项目演练

代码笔记和相关分析

<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=''的方式。

Vue+ElementUI项目演练

猜你喜欢