封裝的原因

首先封裝組件的需求肯定是多個地方要用到同一個東西，他們都有公共的地方，vue的封裝 簡單來說就是將公共參數封裝起來 然后在需要的地方引入

//子組件封裝

<template><div class="pagination-wrapper"><el-pagination:background="background"align="right"@current-change="currentChange"@size-change="sizeChange":page-size="pageSize":page-sizes="[10,20,30]":current-page="currentPage":layout="layout":total="total":page-count="pageCount"><div class="tip"><span>共{{pageCount}}頁</span><span>共{{total}}條記錄</span></div></el-pagination></div> </template><script> /*** 分頁組件* @props total 總記錄數* @props pageCount 總頁數* @props currentPage 當前頁碼* @props pageSize 每頁記錄數* @methods handle(currentPage, pageSize) 當前頁碼和每頁條數*/ export default {props: {total: {type: Number,default: 0},pageCount: {type: Number,default: 0},currentPage: {type: Number,default: 1},pageSize: {type: Number,default: 1},layout: {type: String,default: "sizes, prev, pager, next, slot, jumper"}},data() {return {background: true,};},watch: {},computed:{},created() {},mounted() {this.$nextTick(() => {// console.log(this.currentPage)});},methods: {// 分頁currentChange(val) {this.$emit("handle", val, this.pageSize);},sizeChange(val) {this.$emit("handle", this.currentPage, val);}} }; </script><style scoped lang="less"> .pagination-wrapper {padding: 20px 0;background: #fff;.tip {display: inline-block;font-weight: normal;span {margin: 0 10px;}} } </style>

//父頁面---調用

<template><div class='pagination-default'><com-pagination @handle="pageChange" :total="total" :page-size="pageSize" :current-page.sync="pageNum" :page-count="pageTotal"></com-pagination></div> </template><script>export default {data() {return {total: 0, // 總記錄數pageSize: 10, // 每頁記錄數pageNum: 1, // 當前頁碼pageTotal: 0, // 總頁數tableData: [],totalData: "",}},mounted(){}, methods: {pageChange(currentPage, pageSize) {this.pageNum = currentPage;this.pageSize = pageSize;},}} </script><style scoped lang="less"></style>

遇到的性能優化的問題

這里。我之前遇到一個坑，我一般都是直接封裝成公共組件，但是公共組件 在項目初始化的時候就都調用了 所以。加載的時候特別慢，這就需要。你單獨引入。不能直接定義成全局的

轉載于:https://www.cnblogs.com/lml-lml/p/11309473.html

總結

以上是生活随笔為你收集整理的vue 组件的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。