vue3前端实现组件的属性事件方法_简明范例

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>