组件

# 组件的使用

# 处理侧边栏导航菜单

# 1、创建 `src/views/layout/components/aside.vue`

<template>
  <!--
    el-menu-item 的 index 不能重复，确保唯一即可
   -->
  <el-menu
    class="nav-menu"
    default-active="/"
    background-color="#002033"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item index="/">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/settings">
      <i class="el-icon-setting"></i>
      <span slot="title">个人设置</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'AppAside',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.nav-menu {
  .iconfont {
    margin-right: 10px;
    padding-left: 5px;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 2、在 layout 中加载使用侧边栏导航菜单组件

# 父子组件传参

# 父组件传参给子组件

父组件:

<Position :dataList='list'></Position>

export default {
    data() {              //直接传data里面的参数
		return {
			list: {
            	xxx: xxx
        	}
		}
    }
}

1
2
3
4
5
6
7
8
9
10
11

子组件：

<div> {{dataList.xxx}} </div>

export default {
    props: {              //props接收传过来的参数
        dataList: {
            type: [Object],
        }
    }
}

1
2
3
4
5
6
7
8
9

#Vue

Last Updated: 2022/01/04, 17:54:57

← 新增页面 echarts→

组件