抽离公共组件 -分页以及watch与computed

李梨与狸

已于 2023-10-11 09:17:25 修改

阅读量167

点赞数

文章标签： vue.js javascript 前端

于 2023-10-10 14:04:30 首次发布

本文链接：https://blog.csdn.net/LL22222222/article/details/133741176

版权

组件vue3.0
src=>components

分页 el-pagination

<template>
<!-- 分页 -->
      <div class="paging">
            <span class="current">当前页 {{currentTotal}} 条 / </span>
              <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total,prev, pager, next, sizes,jumper"
              :total="total">
            </el-pagination>
         </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  reactive,
  toRefs,
  ref,
  watch,
  onMounted
} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
  props: {
  //当前页有几条数据
      currentTotal:{
        required:true,
        type:Number
      },
     // 当前页
      currentPage:{
        required:true,
        type:Number,
      },
      pageSize:{
        required:true,
        type:Number,
      },
      total:{
        required:true,
        type:Number,
      }
  },
  components: {},
  setup(props,context) {
    const store = useStore()
    const router = useRouter()
    const state: any = reactive({
      currentTotal:computed(()=>{
        return props.currentTotal
      }),
      currentPage:props.currentPage,
      pageSize:props.pageSize,
      total:computed(()=>{
        return props.total
      })
    })
    watch(
      ()=> [props.currentPage,props.pageSize],
      ([NewCurrentPage,NewPageSize])=>{
        state.currentPage = NewCurrentPage
        state.pageSize = NewPageSize
      }
    )
    const handleSizeChange = (val:any)=>{
      context.emit('handleSizeChange',val)
    }
    const handleCurrentChange = (val:any)=>{
      context.emit('handleCurrentChange',val)
    }
    onMounted(async () => {

    })
    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange
    }
  }
})
</script>

<style lang="scss" scoped>
  .paging {
  @include flex(flex-end,center);
  >.current {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999999;
    padding-right: 2px;
  }
}
.el-pagination.is-background {
  padding: 17px 0;
  text-align: right;
  .btn-prev,.btn-next {
    width: 32px;
    height: 32px;
    border: 1px solid #D9D9D9;
    line-height: 32px;
    background-color: #fff;
    .el-icon {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #333333;
      font-weight: normal;
    }
    &:hover {
      border-color: #02AB81;
        .el-icon {
          color:#02AB81;
        }
    }
    &:disabled {
      background-color: #F5F5F5;
      border: 1px solid #D9D9D9;
      .el-icon {
        color: #C0C0C0;
      }
      &:hover {
        background-color: #F5F5F5;
        border: 1px solid #D9D9D9;
        .el-icon {
          color: #C0C0C0;
        }
      }
    }
  }
  .el-pager {
    li {
      width: 32px;
      height: 32px;
      border: 1px solid #D9D9D9;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #333333;
      font-weight: normal;
      line-height: 32px;
      background-color: #fff;
      &:not(.disabled).active{
        background-color: #02AB81;
        border-color: #02AB81;
        &:hover {
          color: #fff;
        }
      }
      &:not(.disabled):hover {
        border-color: #02AB81;
        color:#02AB81;
      }
    }
  }
  .el-pagination__total {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999999;
  }
  .el-select {
    .el-input {
      width: 95px;
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        border: 1px solid #D9D9D9;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #333333;
      font-weight: normal;
      line-height: 32px;
      background-color: #fff;
      &:hover {
        border-color: #D9D9D9;
      }

      &:focus {
        border-color: #02AB81;
      }
      }
    }
  }
  .el-pagination__jump {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 32px;
    height: 32px;
    margin-left: 16px;
    .el-pagination__editor.el-input {
      width: 48px;
      .el-input__inner {
        height: 32px;
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid #D9D9D9;
        &:hover {
          border-color: #D9D9D9;
        }

        &:focus {
          border-color: #02AB81;
        }
      }


    }
  }
}

</style>

computed 与watch

computed watch 都用于监听数据的变化
computed 是计算属性
1. 如果函数所依赖的属性没有变化，则从缓存中读取
2. 必须有return 返回
3. 使用的方法和data中的数据一样，类似于一个执行数据
watch 的监听属性
1. watch的函数名必须要和data中的数据保持一致
2. watch 的参数有两个，新旧，
3. watch 中的函数不用调用
4. 只会监听数据的变化，不会监听数据的地址变化
5. 深度监听要配合 deep:true 才能使用
  深度监听：当监听的是对象类型的时候，需要用深度监听
6. immediate:true 页面首次加载时做一次监听

// 深度监听
	<template>
		<el-input v-model="obj.num">
		</el-input>
		<el-input v-model="obj.age">
		</el-input>
	</template>

<script lang="ts">
export default defineComponent({
	 setup() {
	 	const state:any =  reactive({
	 		obj:{
		 		num:'',
		 		age:''
		 	}
	 	}),
		watch((newObj,oldObj)=>{
			
		},{deep:true}
			// {immediate:true}
		)
	
	 }
})
</script>

区别
1. computed 是计算属性，watch 监听一个值的变化来执行对应的函数
2. computed函数所依赖的属性不变的时候会调用缓存，watch监听的数据发生变化时会调用回调
3. 使用场景：computed当一个属性受多个属性影响时，如果结算页面
  watch 一条数据影响多条数据时，如果搜索框
4. 是否支持异步，computed 函数不能有异步 watch 支持

组件传值(以分页为例)

 <pagination 
 	 :currentTotal="tableData.length" 
 	 :currentPage="commitData.currentPage" 
 	 :pageSize="commitData.pageSize" 
 	 :total="commitData.total" 
 	 @handleSizeChange = "handleSizeChange" 
 	 @handleCurrentChange ="handleCurrentChange">
 </pagination>

父组件<=>子组件传值 (props 和$emit)

父 = > 子
父组件的操作
在这里插入图片描述
子组件的接受(通过props)

子组件-> 父组件通过emit 定义事件

//子组件  触发事件

const handleSizeChange = (val:any)=>{
	// val: pageSize
      context.emit('handleSizeChange',val)
    }
    const handleCurrentChange = (val:any)=>{
    // val:currentPage
      context.emit('handleCurrentChange',val)
    }```

// 父组件 	使用监听事件并更新数据
	@handleSizeChange = "handleSizeChange" 
     @handleCurrentChange ="handleCurrentChange"

父访问子（ref）

祖先传后代（provide/inject）

父组件提供数据
	provide:{
		age: '12'
	}

子组件接受
	inject:['age']