如何使用Vue异步组件？

Question

我使用了laravel5.4和vue 2，我想使用一个按钮作为异步加载组件。我的Vue js组件是分开的: example.vue和test.vue，我将它们作为html标记加载。

这是我的app.js：

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

const app = new Vue({
el: '#app'
});

这里是显示组件的地方。

    <How can i use Async components?div id="app">
         <example2></example2> 
    </div>

如何使用异步组件？

不，我觉得你不了解我。这是我的组件注册

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

Vue.component('example2', function (resolve) {

require(['./components/Example2.vue'],resolve)

})


const app = new Vue({
el: '#app'
});

在require中，它默认解析(如所示)，我不知道当我调用组件时，应该如何传递此方法的解析和拒绝键。

Answer 1

您可以在vue 2中使用异步组件的样式方式。正确使用异步组件可以减少项目加载时间。可以使用异步组件，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router ({
routes: [
  {
    path: '/',
    name:'LandingPage'
    component: () => import('@/containers/LandingPage.vue')
  },
  {
    path: '/login',
    name:'LoginPage'
    component: () => import('@/containers/LoginPage.vue')
  }
]
})

在模板中加载组件时，此结构看起来更好：

new Vue ({
  el: 'app',
    components: {
      AsyncComponent: () => import ('./AsyncComponent.vue')
    }
})

您可以查看：www.bdtunnel.com获得更多信息。

Answer 2

对于Vue.js中的异步组件，解析参数是异步调用成功时调用的函数，因此您的require()调用需要在被调用的解析函数中。您只需要删除require()调用中的方括号，并按以下方式格式化该行：

resolve(require('./components/Example2.vue'))

在下面的示例中，我们使用一个基本的setTimeout()来模拟异步调用。解析函数将在5秒后调用，并将Example2组件加载到应用程序中。

为了通过单击按钮显示/隐藏Example2组件，您必须在data()函数中添加一个反应性数据属性。然后，如果您查看App.vue的模板，我们将使用v-if (https://v2.vuejs.org/v2/guide/conditional.html#v-if)指令将Example2组件添加/移除到虚拟DOM中。您也可以很容易地在这里使用v-show (https://v2.vuejs.org/v2/guide/conditional.html#v-show)指令，尽管组件会被隐藏起来。您可以在这里阅读更多关于v-if vs v-show的信息：https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show。这是在应用程序中隐藏和显示调制解调器的一个非常常见的范例--下面的一个示例很好地说明了这一点：https://v2.vuejs.org/v2/examples/modal.html

main.js

import Vue from 'vue'
import App from './components/App.vue'

Vue.component('example2', function(resolve, reject) {
  setTimeout(function() {
    resolve(require('./components/Example2.vue'))
  }, 5000)
})

const app = new Vue({
  el: '#app',
  render: h => h(App)
})

Example2.vue

<template>
  <div>
    <div>Hello example 2!</div>
  </div>
</template>      

App.vue

<template>
  <div id="app">
    <button type="button" @click="onButtonClick">Click me to add the example2 component</button>
    <example2 v-if="show_example2"></example2>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        show_example2: false
      }
    },
    methods: {
      onButtonClick() {
        this.show_example2: true
      }
    }
  }
</script>

Answer 3

根据关于VueJ的文档，您可以定义像这样的异步组件，因为版本2.3

const AsyncComp = () => ({
  // The component to load. Should be a Promise
  component: import('./MyComp.vue'),
  // A component to use while the async component is loading
  loading: LoadingComp,
  // A component to use if the load fails
  error: ErrorComp,
  // 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
})

您可以将此与内置组件结合使用来动态加载组件。

编辑:到提到的文档的更新链接。