从接手的项目上新学到的知识点 vue2 + iview

1.路由跳转时传递参数

router/index.js页面

{
	path: '/task/distribution',
	name: 'TaskDistributionInformation',
	meta: {
		hide: true,
		title: '已分配详情',
		roleId: 1,
	},
	component: () => import('@/pages/task/distribution/information'),
	props: (route) => ({
		id: route.query.id,
		tempStatus: route.query.status,
		processId: route.query.processId,
		templateId: route.query.templateId
	  })
	}

index页面

this.$router.push({
	name: 'TaskDistributionInformation',
	query: {
	id: row['id'],
	processId: row['processInstanceId'],
	templateId: row['templateId'],
  }
})

information页面

export default {
	name: "task-distribution-information",
	props: ['id', 'processId', 'templateId']
}

2.父组件给子组件传值

父组件

<template>
<div class="task-todo-list">
  <icon-button type="md-search" color="#68C6E4" @click="getList" title="查询"></icon-button> // 这个是引入的组件,type,color,title这些就是传过去的值
</div>
</template>
<script>
import IconButton from "@/components/IconButton";
export default {
  components: { IconButton }
}
</script>

子组件

<template>
    <div class="buttonGroup" @click="handleClick">
	<Icon :type="type" style="line-height: 32px; font-size: 23px;" :color="color"/>
    </div>
</template>
<script>
export default {
  props: ['title', 'type','color']
</script>

3.this.$set更新视图

const row = Object.assign({}, this.activeItem, {
	personnelList: lists
})
this.$set(this.list, this.activeItemIndex, row) //this.list是更新的数组，this.activeItemIndex是要更新的数据的下标，row是更新后的数据

4.css设置元素的高度时，如果遇到满屏是100%但是头部占了37px就可以使用calc

height: calc(~"100% - 37px");