首页  >  问答  >  正文

如何在 Vue Composition API 中加载(已安装)组件

<p>我正在尝试加载<code>vue3-burger-menu</code>,但文档仅适用于<code>Options API</code>。另一方面,我使用<code>Composition API</code>,但我有点卡住了。</p> <p>文档是这样说的:</p> <pre class="brush:php;toolbar:false;">import { Slide } from 'vue3-burger-menu' // import the CSS transitions you wish to use, in this case we are using `Slide` export default { components: { Slide // Register your component } }</pre> <p>但是<code>导出默认值</code>对我不起作用。</p> <p>那么,如何加载<code>幻灯片</code>?</p>
P粉010967136P粉010967136441 天前458

全部回复(1)我来回复

  • P粉151466081

    P粉1514660812023-08-29 00:00:30

    这里是工作游乐场vue3-burger-menu 示例。

    https://stackblitz.com/edit/vue-wwkpny ?file=src/App.vue

    您必须将问题中的代码放入自定义组件中。

    像这样:

    MyMenu.vue

    <template>
        <Slide>
          <a id="home" href="#">
            <span>Home</span>
          </a>
        </Slide>
    </template>
    
    <script>
    import { Slide } from 'vue3-burger-menu'  // import the CSS transitions you wish to use, in this case we are using `Slide`
    
    export default {
        components: {
            Slide // Register your component
        }
    }
    </script>

    并在应用程序中使用它:

    App.vue

    <template>
      <div id="app">
        <MyMenu />
      </div>
    </template>
    
    <script>
    import MyMenu from './components/MyMenu.vue'
    
    export default {
      name: 'App',
      components: {
        MyMenu
      }
    }
    </script>

    回复
    0
  • 取消回复