Question

我正在尝试在Vue中使用嵌套组件制作组件。结构可以简化为

ParentComponent.vue
|
|__ ChildComponent.vue

是否只有在使用ParentComponent中的@click单击按钮时才可以获得ChildComponent？我希望该组件仅在单击事件后才加载其文件，而不仅仅是显示/隐藏该组件，因为我正在尝试优化网络使用率，并且嵌套可能会更深。

编辑： 我尝试了以下代码

<template>
  <div class="home">
    <button type="button" @click="isActive=!isActive">SHOW</button>
    <async-component v-show="isActive"></async-component>
  </div>
</template>

<script>

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./components/ChildComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

export default {
  name: "home",
  components: {
    AsyncComponent
  },
  data(){
    return{
      isActive:false
    }
  }
};
</script>

但是，当我单击按钮时，它显示了该组件，而当我在开发人员工具中检查“网络”选项卡时，它并没有显示如果获取了任何内容并且该组件已经加载，那么它只会显示/隐藏它。

Answer 1

如评论中所述，这篇文章是非常有用的资源。不过，我将重点介绍最重要的部分。

如果您是希望使用异步组件的Browserify用户，那么不幸的是，它的创建者已经明确表明异步加载“不是Browserify永远不会支持的东西。”至少在官方上如此。 Browserify社区已找到一些解决方法，这可能对现有和复杂的应用程序有所帮助。对于所有其他情况，我们建议使用Webpack以获得内置的一流的异步支持。

简而言之，如果您使用的是browserify，则不能，因为您使用的是SFC，所以我想您是

。

您还使用了v-show，它使用了隐藏的显示类来隐藏，因此即使没有使用browserify，它也会在最初加载，因此您应该使用“ v-if”，它会删除并添加元素切换可见性（您可以使用调试控制台进行检查）。

但是，一种可能是代码拆分，其中browserify会将组件代码拆分为一个单独的文件，但这可能也不会达到您描述的结果。

示例：

const Menu = () => import(/* webpackChunkName: "signed-in" */ './pages/Menu');

点击时会触发vue异步加载组件

1 个答案: