分页&分页组件复用&子传父&父传子

最新推荐文章于 2024-10-03 20:14:40 发布

不凡梵

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量518

点赞数 14

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/GKF0206/article/details/135466376

版权

本文介绍了Vue中的局部组件、全局组件的使用方法，以及分页组件的代码示例。此外，还详细讲解了父组件与子组件之间的数据传递，包括父子间的数据流和动态菜单的后台实现。

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

一、局部组件:

在某一个组件中进行使用的组件就叫局部组件

1、导入组件

2、把那个导入的组件注册到组件里面

3、使用组件

二、全局组件

1、注册的组件在所有的组件中都可以进行使用

main.js中

2、使用全局组件

3、分页组件

<template>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="mydata.currPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="mydata.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="mydata.total">
  </el-pagination>

</template>

<script>
export default ({
  props:['mydata'],
  data(){
    return{
      // currentPage4:1,
      page:{
        currPage:1,
        pageSize:5,
        total:100
      },
    }

  },
  methods:{
    handleSizeChange(val) {

      this.page.pageSize=val;
      this.$emit("myPage",this.page)
      // this.queryData()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {

      this.page.currPage=val;
      this.$emit("myPage",this.page)
      // this.queryData();

      // console.log(`当前页: ${val}`);
    },

  },

})

</script>

<style>

</style>

三、父传子

1、父组件的data中有一个变量

2、在父组件中绑定一个属性传递给子组件

3、子组件接收这个值

使用props 来接收父组件中的值

4、使用父组件传递过来的值

使用差值表达式

子传父

1、将子组件中的值传递给父组件

子组件在进行传值的时候一般通过按钮传递

2、点击按钮的时候需要自定义一个事件（通过这个事件进行传值）

3、父组件使用一下子组件中定义的事件接收值

4、通过函数接收值

5、使用一下值

四、动态菜单的后台

1、菜单页

<template>
  <el-container>
    <el-aside width="220px">
      <!--<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=>{
        this.menuData = res
    })
  }
}
</script>

<style>
	.el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	  
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 20px;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  
	  .el-container:nth-child(5) .el-aside,
	  .el-container:nth-child(6) .el-aside {
	    line-height: 260px;
	  }
	  
	  .el-container:nth-child(7) .el-aside {
	    line-height: 320px;
	  }
	  .el-aside {
	      color: #333;
	    }
</style>

2、子组件

<template>
  <div>
    <el-submenu v-if="itemData.sonMenus.length>0" :index="''+itemData.menuid" >
      <template slot="title">
        <span><i class="el-icon-user"></i>{{itemData.mname}}</span>
      </template>
      <!--调用组件自身，循环item的nodes，实现递归 -->
      <child v-for="item in itemData.sonMenus" :key="item.menuid" :item-data="item"></child>
    </el-submenu>
    <el-menu-item v-if="itemData.sonMenus.length==0" :key="itemData.menuid" :index="itemData.url">
      <span>{{itemData.mname}}</span>
    </el-menu-item>
  </div>
</template>
<script>
export default {
  name: "child",
  //父菜单向子菜单传递数据的时候使用的是props 将绑定的数据直接传递过来
  props:['itemData'],
}
</script>
<style scoped>
</style>