如何将 RadSideDrawer 与 Typescript vue 类组件一起使用？答案

【问题标题】：How to use RadSideDrawer with Typescript vue class components?如何将 RadSideDrawer 与 Typescript vue 类组件一起使用？
【发布时间】：2020-03-02 23:28:22
【问题描述】：

我正在尝试将外部组件与 Vue Typescript 类组件一起使用。我已经安装了standard template 并根据instruction 修改了它的<script> 块：

    import { Vue, Component, Prop } from "vue-property-decorator";

    @Component
    export default class App extends Vue {
        msg: string = "Hello";
    }

但我收到错误消息：No known component for element RadSideDrawer。

我还尝试将RadSideDrawer 包含在@Component 选项中，但没有成功：

    import { Vue, Component, Prop } from "vue-property-decorator";
    const RadSideDrawer = require('nativescript-ui-sidedrawer').RadSideDrawer;

    @Component({
        components: {
            RadSideDrawer,
        }
    })
    export default class App extends Vue {
        msg: string = "Hello";
    }

我所有的组件代码都是here。我没有修改模板的任何其他部分，所以我在main.ts中有这行：

Vue.registerElement(
    'RadSideDrawer',
    () => require('nativescript-ui-sidedrawer').RadSideDrawer,
);

但它不起作用。如何将 RadSideDrawer 与类组件一起使用？

【问题讨论】：

它适用于我，如果您仍有问题，请分享一个可以重现问题的示例 repo。
我确认 vue-class-component 与 RadSideDrawer 冲突。我无法使用它将所有软件包升级到最新版本，也无法从nativescript-vue而不是vue-property-decorator导入Vue。如果您提出解决方案，请分享。
我可能找到了让它工作的方法，但遇到了另一个问题：github.com/NativeScript/NativeScript/issues/8065

标签： typescript vue.js nativescript nativescript-vue

【解决方案1】：

//main.ts
...
import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
Vue.use(RadSideDrawer)
...

//mycomponent.vue
<template>
  <Page>
    <RadSideDrawer ref="drawer">
      <StackLayout ~drawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
          <Label text="Navigation Menu"></Label>
        </StackLayout>
        <Label
          text="Close Drawer"
          color="lightgray"
          padding="10"
          style="horizontal-align: center"
          @tap="onCloseDrawerTap"
        ></Label>
      </StackLayout>
      <StackLayout ~mainContent>
        <StackLayout orientation="vertical">
          <Button
            text="OPEN DRAWER"
            @tap="onOpenDrawerTap()"
            class="drawerContentButton"
          ></Button>
        </StackLayout>
      </StackLayout>
    </RadSideDrawer>
  </Page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({ name: 'Drawer' })
export default class Drawer extends Vue {

  private onOpenDrawerTap () {
    const ref = this.$refs.drawer as any
    ref.showDrawer()
  }
  private onCloseDrawerTap () {
    const ref = this.$refs.drawer as any
    ref.closeDrawer()
  }
}
</script>

【讨论】：

您介意编辑您的答案以包含一些额外的解释吗？你的方法是什么，它如何解决 OP 的问题？
我刚刚回答了这个问题：“如何将 RadSideDrawer 与类组件一起使用？”