概述
web前端开发将因此重回到面向对象编程的辉煌时代！
我个人习惯把可视化的组件称为控件。下面是一个简单的翻页控件的调用，再后面是此控件的源码。
黄色标志：属性；
绿色标志：事件；
青色标志：方法。
下面一共讲解两个VUE文件。
第一个文件名：report_table.vue，这是一个分页报表的UI实现代码，演示如何调用翻页控件。
<template>
……这是报表页面代码，本文暂把报表页面称为容器页。
</div>
<center>
<!--下面是自定义翻页控件的名称-->
<zwpage
<!--下面是把右边的容器变量，传给左边的控件作为属性值，所以必须在控件属性前面加":"号，否则传过去的是变量名-->
:record_count="m_record_count"
:page_count="m_page_count"
:cur_page="m_cur_pagecode"
<!--下面是控件发生选页事件时，上传上来页码，然后容器定义handle_pageevent 作为响应函数-->
@pageevent="handle_pageevent"
<!--下面是容器调用控件的公共方法，pagebar_method是其公共方法的集合 -->
ref="pagebar_method" />
</center>
</div>
</template>
<script lang="ts" setup>
//上面略去报表相关代码///
//下面是翻页控件的被调用代码///
import {ref} from 'vue'
import zwpage from './components/zwpage.vue';
const m_record_count=ref(0)
//总记录数，当此值在本容器中修改时，控件的显示属性也会发生同步变化
const m_page_count=ref(0)
//总页数，当此值在本容器中修改时，控件的显示属性也会发生同步变化
const m_cur_pagecode=ref(1)
//当前页码，当此值在本容器中修改时，控件的显示属性也会发生同步变化
//下面是容器收到控件的换页事件
const handle_pageevent=(curpage)=>{
m_cur_pagecode.value=curpage; //这里接收控件发来的用户点选的页码
//get_table_page_data(m_cur_pagecode);//伪代码：这里通过页码重新去获取新的页数据
}
//下面板块负责容器调用控件zwpage中的公共方法做控件的UI更新
const pagebar_method=ref(null);
const call_pagebar_method1=(record_count,page_count)=>{
pagebar_method.value.refreshme(record_count,page_count);
//这里是数据变化后的刷新方法，比如删除记录后，总页数可能变少
}
const call_pagebar_method2=(is_show_rcount)=>{
pagebar_method.value.isshowcount(is_show_rcount);
//这里是是否显示记录总数的方法
}
//上面板块负责调用控件zwpage中的公共方法做UI更新
</script>
下面是被调用翻页控件的实现代码文件 ：./components/zwpage.vue
<template>
<div>
<span v-if="show_record_count">记录总数:{{record_count}}</span>
<span>总页数:{{page_count}}</span><span>当前页码:{{cur_page}}</span>
<el-button v-if="havearray[0]" @click="handleGoto(1)">1</el-button>
<el-button v-if="havearray[1]" @click="handleGoto(2)">2</el-button>
<el-button v-if="havearray[2]" @click="handleGoto(3)">3</el-button>
<el-button v-if="havearray[3]" @click="handleGoto(4)">4</el-button>
<el-button v-if="havearray[4]" @click="handleGoto(5)">5</el-button>
<el-button v-if="havearray[5]" @click="handleGoto(6)">6</el-button>
<el-button v-if="havearray[6]" @click="handleGoto(7)">7</el-button>
<el-button v-if="havearray[7]" @click="handleGoto(8)">8</el-button>
<el-button v-if="havearray[8]" @click="handleGoto(9)">9</el-button>
<el-button v-if="havearray[9]" @click="handleGoto(10)">10</el-button>
</div>
</template>
<script setup>
import { ref,reactive } from 'vue'
//下面是控件的属性，由上级设定，并且可以绑定上级的变量从而实现同步变化。
//它们的初值也是上级传递下来的。
defineProps({
record_count: Number,
page_count: Number,
cur_page: Number,
})
//下面这个数组决定哪些按钮显示，哪些el-button不显示，通过v-if起作用
const havearray=reactive( { 0:true, 1:false, 2:false, 3:false, 4:false,
5:false, 6:false, 7:false, 8:false, 9:false, } );
//下面板块是暴露方法refreshme让上级调用
const refreshme=(a,b)=>{
for(var i=0;i<10;i++) { havearray[i]=false; }//初始化
for(var i=0;i<b;i++)//这里b传入的值是总页数
{ havearray[i]=true; }//有几页，就显示几个页按钮
}
const show_record_count=ref(true);
const isshowcount=(c)=>{
show_record_count.value=c;//在page_bar上是否显示总记录数
}
defineExpose({refreshme,isshowcount});
//导出公共方法供上级调用，这里是数组形态，所以可以导出多个方法
//下面是本地按钮事件，返回所按的页码值
const handleGoto=(cp)=>{
mycallback(cp);//进一步调用下面的回调函数，把页码传给它。
}
//下面是给本控件定义一个冒泡事件，比如@CLICK事件之类，供上级调用
const emits=defineEmits(['pageevent']) //因为这里是数组，所以可以定义多个冒泡事件
const mycallback=(curpage)=>{
emits("pageevent",curpage); //冒泡上去，触发上级容器pageevent事件并传参
}
</script>
<!--代码结束-->
以上只是说明属性，事件，方法的实现过程，真做翻页控件还需要更好更多的设计和代码加入。
最后
以上就是细腻汉堡为你收集整理的vue3前端实现组件的属性事件方法_简明范例的全部内容，希望文章能够帮你解决vue3前端实现组件的属性事件方法_简明范例所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复