Vue（三十）公共组件

• Z时代
• 2024-01-10
• 分类：综合

以 分页 组件为例：（根据自己具体业务编写）

1.pagination.vue

<template>
  <!-- 分页 -->
  <div class="table-pagination" v-if="flag">
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'my-pagination',
  props: {
    flag: Boolean,
    page: Number,
    pageSize: Number,
    totalCount: Number
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

2.新建一个utils文件夹，然后新建一个global.js

/*
** 公共组件
*/
import Pagination from '../components/common/pagination/Pagination.vue'
const global = (Vue) => {
  if (global.installed) return
  Vue.component('my-pagination', Pagination) // 注册全局分页组件
}
export default global

3.在main.js中引入js

import Global from './utils/global'
Vue.use(Global) // 注册全局组件

4.直接在页面中引入

<my-pagination
          @handleSizeChange='handleSizeChange'
          @handleCurrentChange='handleCurrentChange'
          :flag='flag'
          :page='page'
          :pageSize='pageSize'
          :totalCount='totalCount'>
        </my-pagination>

以上是 Vue（三十）公共组件 的全部内容， 来源链接： utcz.com/z/378436.html