项目vue问题

<el-button @click="selectPaixu($event)">更新时间<i class="fa fa-long-arrow-down"></i><i class="fa fa-long-arrow-up"></i></el-button>

$event.target 即获取当前操作的dom对象，以便后续操作

<el-select v-model="paper.paperLevel" @change="updateLevel(paper.id,$event)" style="width: 120px;">
              <el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>

select的onchange事件如果想传递多个参数 那$event可以代表当前选中的值

关于公用的自定义vue组件，当出现我们不希望看到的缓存现象时，以下是项目案例

1.table列表中有一栏操作，可查看当前列的详情

2.点击查看按钮传递当前列的id参数来查询详情

3.详情页面为引入的自定义vue组件

4.当点击查看的时候出现问题:点击第一行数据，请求后台返回数据，挂载组件，但是点击第二行的时候发现并没有请求后台，展示的依然是第一行的数据

5.解决：在点击查看的时候，我们会拿到该行的id传递给子组件(v-bind:parentToChild=...结合prop,具体操作自行百度或者实践)，在子组件中增加watch监听传过来的id是否变化，变化则走后台查询

6.具体的代码实现

watch: {
    parentToChild (val, oldVal) {
    this.initData()
	    }
    },

路由跳转页面携带参数

项目中我们会事先想好需要哪些页面然后在js文件中配置其path和components如下:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: ListPaper
    },
    {
      name: 'editpaperinfo',
      path: '/editpaper',
      component: EditPaper
    },
    {
      path: '/paperreport',
      component: PaperReport
    },
    {
      name: 'viewpaper',
      path: '/viewpaper',
      component: viewPaper
    }
  ]
})

注意上面有两个组件给了name属性，当发生页面跳转并且需要传递参数的时候（例如返回按钮，需要表单回显编辑更新，我们需要先查询再回显再修改编辑最后再更新）可以这样传递id

editPaperInfo (id) {
      this.$router.push({ name: 'editpaperinfo', params: { keyId: id } })
    },

然后在名字为editpaper.vue组件中这样获取id即可

this.id = this.$route.params.keyId