全局组件+局部组件+组件传值+多级菜单

组件注册 — Vue.js

全局组件+组件传值

全局组件：全局组件是在Vue实例化之前定义的组件，可以在整个应用程序中的任何地方使用。

组件命名：短横线分隔命名、首字母大写命名

父传子

• 父组件定义数据并通过属性的方式给子组件传递数据
• 子组件通过props属性接受数据并做参数设置
• 子组件使用传递过来的数据

子传父

• 子组件通过$emit触发父组件上的自定义事件，发送参数
• 子组件绑定事件
• 父组件监听传递的事件
• 父组件中对监听的事件做处理，拿到传递的数值再在页面显示或其他处理。

1.定义组件内容

把用到分页的相关页面

page.vue

<template>
  <!-- 分页组件 -->
  <div class="block">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        //子组件使用传递过来的数据
        :current-page="mydata.currPage"
        :page-sizes="[2, 4, 6,8]"
        :page-size="mydata.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="mydata.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
//接收父组件的数据
  props: ['mydata'],
  methods: {
    handleSizeChange(val) {
      this.mydata.pageSize = val
      //子组件通过$emit触发父组件上的自定义changePage事件，发送参数,
      //子组件中的值传给父组件的时候 需要绑定一个事件  如果不绑定事件没法传值
      this.$emit("changePage", this.mydata)
    },
    handleCurrentChange(val) {
      this.mydata.currPage = val
      this.$emit("changePage", this.mydata)
    },
  },

}
</script>

<style>

</style>

2. 将组件设置成一个全局的组件

在main.js里加入

import page from '@/views/zujian/page.vue'
// 注册为全局组件
Vue.component("my-page",page);

3. 使用组件

在需要使用这个内容的地方引入这个组件即可

<!--    父组件监听传递的事件changePage-->
<!--    父组件定义数据mydata并通过属性的方式给子组件传递数据-->
    <my-page :mydata="page" @changePage="change"></my-page>

//父组件中对监听的事件做处理，拿到传递的数值再在页面显示或其他处理。
change(obj) {
  this.page.currPage = obj.currPage
  this.page.pageSize = obj.pageSize
  this.query()
},

局部组件+多级菜单

局部组件：局部组件是在Vue组件内部定义的组件，只能在该组件内部使用。

数据库：

后端

用自动生成类创建menu

自动生成类在‘Vue前后端交互+springboot+mybatisplus’文章里写过

写一个getAll()方法

MenuController

Menu实体

MenuMapper.java

MenuServiceImpl

IMenuService

MenuMapper.xml

前端

child.vue

<template>
  <div>
    <!-- 如果当前菜单有子菜单，则渲染为一个子菜单 -->
    <el-submenu v-if="itemData.menu.length>0" :index="''+itemData.menuid">
      <template slot="title">
        <span><i class="el-icon-user"></i>{{itemData.mname}}</span>
      </template>
      <!-- 调用子组件 child，循环渲染子菜单 -->
      <child v-for="item in itemData.menu" :key="itemData.menuid" :item-data="item"></child>
    </el-submenu>
    <!-- 如果当前菜单没有子菜单，则渲染为一个菜单项 -->
    <el-menu-item v-if="itemData.menu.length==0" :key="itemData.menuid" :index="itemData.url" v-has="itemData.mcode">
      <span>{{itemData.mname}}</span>
    </el-menu-item>
  </div>
</template>
<script>
export default {
  name:'child',
  //父菜单向子菜单传递数据的时候使用的是props 将绑定的数据直接传递过来
  props:['itemData'],
}
</script>
<style scoped>
</style>

main.vue

<template>
  <el-container>
    <el-aside width="200px">
      <!--<el-col span="4">-->
      <el-menu :router="true" unique-opened >
        <child v-for="item in menuData" :item-data="item"></child>
      </el-menu>

    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>
<!--定义子菜单的模板-->
<script>

import child from '@/views/child.vue';
export default {
  name:'main',
  //组件
  components:{child},//使用child组件
  mounted(){
  },
  data(){
    return {
      menuData:[]
    }
  },
  created(){
    //获取菜单的数据
    this.$axios.get("/menu").then(res=>{
      console.log(res)
this.menuData=res

    })
  }
}
</script>
<style scoped>
</style>

配置路由