更改 Rad SideDrawer 的内容（原为“第二（第三，...）侧抽屉”答案

【问题标题】：Change Content of Rad SideDrawer (was 'Second (third,...) Side Drawer'更改 Rad SideDrawer 的内容（原为“第二（第三，...）侧抽屉”
【发布时间】：2020-01-29 16:14:10
【问题描述】：

应该很简单，不过我在这里问，也许其他人可以用。

如何添加第二个侧边抽屉？

我已经将DrawerContent.vue复制到DrawerContentL2.vue，并修改了内容。

并添加

import DrawerContentL2 from "./components/DrawerContentL2";

到我的 app.js

而原来的 app.js 看起来像

new Vue({
     render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            h(Twisty, { slot: 'mainContent' })   
    ]
        )
  }
  }).$start();

现在呢？

【问题讨论】：

您是否在询问（基于您的 cmets）如何动态更改 DrawerContent？请添加更多详细信息。
是的。或者，更确切地说，为内容使用不同的文件。当用户导航页面 LevelTwo 时，抽屉显示 DrawerContentL2.vue，而不是用 DrawerContent.vue 填充抽屉。我知道这很简单......????
在 DrawerContent 中使用 slot 或者简单的 v-if 来渲染正确的组件，当你到达第二层时切换 slot/变量？
是的，听起来不错。我仍然没有反应性地思考。（猜猜这就是试图成为高中重新设计运动的领导者，同时还要学习编写本机应用程序和其他工作的结果。）一旦我修复 NativeScript 主题：Core V2 破坏我的应用程序，我会通知你）
Theme V2有什么问题？

标签： nativescript nativescript-vue

【解决方案1】：

对于 NativeScript UI RadSideDrawer，您必须将第二个放在根目录的内容中。

或者，您也可以使用 Igor Randjelovic 的 nativescript-vue-multi-drawer，它专为多抽屉功能而编写。

【讨论】：

对不起，没说对：我只需要一个抽屉，只有在前10页之后，我需要将内容（DrawerContent.vue）替换为不同的内容（Drawercontent2.vue） .我有第二个文件。我只是不确定当用户导航到新部分时如何召唤它。

【解决方案2】：

我尝试了我认为@Manoj 在这里提出的建议：

    new Vue({ 
    render (h) {
      return h(
        App,
        [
          h(v-if (store.state.currentLevel == "L1"){DrawerContent} v-else {DrawerContentL2}, { slot: 'drawerContent' }),
          h(Home, { slot: 'mainContent' }) 
        ]
      )
    }
  }).$start()

或者，或者，

new Vue({ 
render (h) {
  return h(
    App,
    [
      h(if (store.state.currentLevel == "L1"){DrawerContent} else {DrawerContentL2}, { slot: 'drawerContent' }),
      h(Home, { slot: 'mainContent' }) 
    ]
  )
}

}).$start()

两者都在条件上绘制了unexpected token 错误。

【讨论】：

【解决方案3】：

并且，为了好玩，尝试将整个事情包装在一个条件中。

if(store.state.currentLevel == "L1"){ 
  new Vue({ 
    render (h) {
      return h(
        App,
        [
          h(DrawerContent, { slot: 'drawerContent' }),
          h(Home, { slot: 'mainContent' }) 
        ]
      )
    }
  }).$start() }
else { 
  new Vue({ 
    render (h) {
      return h(
        App,
        [
          h(DrawerContentL2, { slot: 'drawerContent' }),
          h(LevelTwo, { slot: 'mainContent' })
         ] 
      )
        }
        }).$start(); }

这会编译并运行，但仅在应用启动时。更改 currentLevel 不会更改 drawercontent。

【讨论】：

【解决方案4】：

好的，知道了。我没有尝试将slot: 'drawerContent' 的内容从DrawerContent.vue 更改为DrawerContentL2.vue，而是将它们放在两个不同的文件中，并使用主 DrawerContent.vue 来选择哪个。

感谢 Alligator.io 提供有关操作方法的提示。 Swappable Dynamic Components in Vue.js

新的 DrawerContent.vue 看起来像：

<template>
    <component :is="dynamicComponent"></component>
</template>

<script>

import DrawerContentL1 from "./DrawerContentL1";
import DrawerContentL2 from "./DrawerContentL2";

export default {
  components: {
    DrawerContentL1,
    DrawerContentL2
  },
  computed: {
    dynamicComponent() {
      if(this.$store.state.currentLevel=="L1") {
        return 'DrawerContentL1';
      } else {
        return 'DrawerContentL2';
      }
    }
  }
}
</script>

当然，每个组件文件都必须声明它的名称：

export default {
        name: "DrawerContentL1",
        mounted() {
        ...

【讨论】：