Component - 组件

更新说明

• 维护人员：码小趣 (www.maxiaoqu.com)
• 维护日期：2024-03-26T14:26:12.000Z
• 最后维护人员：码小趣 (www.maxiaoqu.com)
• 最后维护日期：2024-03-26T14:26:20.000Z

说明

使用装饰器 Component 来装饰一个类，这个类需要继承 Vue 基类。

标准写法

<script lang="ts">
import {Component, toNative, Vue} from "vue-facing-decorator";
@Component({
  name: "DemoPage",
  components: {}
})

class DemoPage extends Vue {
  // 你的业务代码
}
export default toNative(DemoPage);
</script>

<template>
  <div class="demo-page">
    DemoPage
  </div>
</template>

示例代码（一）

假如你从某个库里面导出了一个方法，直接想再template标签内使用，可以使用组合式写法中的的setup，这样直接可以在template 标签内使用！

以@newway/libs里的createGuid为例：

<script lang="ts">
import {Component, toNative, Vue} from "vue-facing-decorator";
import {createGuid} from "@newway/libs";

@Component({
  name: "DemoPage",
  components: {},
  setup() {
    return {
      createGuid
    };
  }
})

class DemoPage extends Vue {
  // 你的业务代码
}
export default toNative(DemoPage);
</script>

<template>
  <div class="demo-page">
    DemoPage {{createGuid()}}
  </div>
</template>