Vue 组件

传说的彩色柠檬

已于 2024-01-09 09:11:58 修改

阅读量446

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-01-08 19:53:04 首次发布

本文链接：https://blog.csdn.net/m0_51101158/article/details/135463925

版权

本文介绍了Vue中的全局组件和局部组件的概念，重点讲解了组件之间的传值方法（父传子和子传父），并展示了如何使用分页组件和通过组件递归建立多级菜单，包括后端通过MyBatis实现菜单数据的递归查询，以及前端展示的代码实现。

摘要由CSDN通过智能技术生成

全局组件与局部组件

全局组件

于main.js中定义全局组件、

import pageCompon from "@/views/page/page.vue"
Vue.component("pageCompon",pageCompon)

在其他组件中即可作为标签直接使用

<page-compon :pageData="page" @pageChange="pageChange"></page-compon>

组件传值

父传子

被引用的组件即为子组件通过绑定值来进行父组件对子组件的传值

子组件接收

export default ({    
    props:['pageData']
})

子传父

子组件对父组件传值则需要该函数的帮助

this.$emit('pageChange',this.pageData)

父组件中则需要@pageChange="pageChange"来接收

局部组件

与全局组件类似，仅在某个组件中引用定义

分页全局组件

page.vue

<template>
	<div>
		<div class="block">
		  <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageData.currPage"
		      :page-sizes="sizes"
		      :page-size="pageData.size"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="pageData.total">
		  </el-pagination>
			
		</div>
	</div>
</template>
<script >
export default ({
  data(){
    return{
    }
  },
  //传过来的数据进行处理
  props:['pageData','sizes'],
  methods:{
    handleSizeChange(val) {
      this.pageData.pageSize=val
	  this.pageData.currPage=1;
      this.$emit('pageChange',this.pageData)
    },
    handleCurrentChange(val) {
      this.pageData.currPage=val
	  this.pageData.pageSize=this.pageData.size
      this.$emit('pageChange',this.pageData)
    },
  },
})
</script>
 
<style >
 
</style>

需要父组件传递的数据：

page: {
 	current: 1,
 	size: 5,
 	total: 66
},
sizes:[5, 10, 15, 20]

组件练习

通过组件递归建立多级菜单

后端

数据库：

通过mybatis递归建立菜单数组

@Data//entity
public class Menu implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(value = "mid", type = IdType.AUTO)
    private Integer mid;

    private String mname;

    private String url;

    private Integer pid;
    @TableField(exist = false)
    private List<Menu> sonMenus;
}

<mapper namespace="org.example.mapper.MenuMapper">
    <resultMap id="getAllMenu" type="org.example.entity.Menu" autoMapping="true">
        <id property="mid" column="mid"/>
        <collection property="sonMenus" ofType="org.example.entity.Menu" autoMapping="true" select="getMenu" column="id=mid">
            <id property="mid" column="mid"/>
        </collection>
    </resultMap>
    <select id="getMenu" resultMap="getAllMenu"> select * from menu where pid=#{id} </select>
</mapper>

发送测试请求

后端告一段落，我们来处理前端

前端

建立child子组件来递归menu

<el-menu :router="true" unique-opened>
	<child v-for="item in menuData" :item-data="item"></child>
</el-menu>

children组件：

<template>
  <div>
    <el-submenu v-if="itemData.sonMenus.length>0" :index="''+itemData.mid" >
      <template slot="title">
        <span><i class="el-icon-user"></i>{{itemData.mname}}</span>
      </template>
      <!--调用组件自身，循环item的nodes，实现递归 -->
      <child v-for="item in itemData.sonMenus" :key="itemData.mid" :item-data="item"></child>
    </el-submenu>
    <el-menu-item v-if="itemData.sonMenus.length==0" :key="itemData.mid" :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>

最后的效果：