深入了解Vuetify数据表格各组件

页面组件

在Jianghu框架中，页面组件指的就是Vue组件。

Vue组件是Vue框架的核心概念之一，它是一个可重用的、封装了特定功能的代码块，可以在Vue.js应用程序中使用。组件将一个页面分割成多个可重用的小部分，每个部分都有自己的功能和状态。组件可以包含HTML、CSS和JavaScript代码，并且可以接收参数和发射事件。

在Vue中，组件具有自己的生命周期、属性和方法，并可以嵌套在其他组件中。组件可以通过单文件组件（.vue文件）或JavaScript对象的方式定义。使用组件可以使代码更加模块化，易于维护和扩展。Vue中的组件化开发，大大提高了应用的可维护性和可重用性。

常用组件

• jh-menu ：menu菜单组件
• jh-toast ：江湖轻提示组件

  # 示例
  await window.vtoast.loading("加载中");
  await window.vtoast.success("操作成功");
  await window.vtoast.fail("操作失败");

• jh-mask ：遮罩组件 - 用户过渡页面、请求等延迟操作时禁止点击。
• jh-confirm-dialog ：确认提示框组件 - 通常用于需要提醒用户确认时激活。

  # 示例
  window.confirmDialog({ title: '温馨提示', content: '确定操作吗？' })

Vue组件编写样例

编写一个/view/component/child-component.html, 代码如下

<!-- 子组件 -->
<template id="child-component">
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
Vue.component("ChildComponent", {
  template: "#child-component",
  vuetify: new Vuetify(),
  props: {
    message: String
  },
  methods: {
    changeMessage() {
      this.$emit('update', 'New Message');
    }
  }
});
</script>

页面中通过<child-component message="这是一个子组件"/>使用组件

...
        <child-component message="这是一个子组件"/>
...
{% block vueScript %}
{% include 'component/child-component.html' %}
<script type="module">
    .....
</script>
{% endblock %}

学习内容

• v-dialog
• v-datatable
• v-btn
• v-slot
• Object.assign 与 ... 的功能与区别

作业

• 自己尝试动手做一做，改一改，强化前面提到的这些概念。你还有哪些不明白的组件？也可以这样修改一下

点击这里下载今天用到的代码。