9

我正在使用 laravel 5.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 中，它默认已解析（如图所示）我不知道在调用组件时应该如何将解析和拒绝键传递给页面中的此方法。

4

5 回答 5

10

您可以通过样式方式在 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了解更多信息。

于 2018-01-02T20:57:41.767 回答
3

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

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

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

为了Example2通过单击按钮显示/隐藏组件，您必须在data()函数中添加反应数据属性。然后，如果您查看 App.vue 的模板，我们正在使用v-if( https://vuejs.org/v2/guide/conditional.html#v-if ) 指令将Example2组件添加到/从虚拟 DOM。您也可以在这里很容易地使用v-show( https://vuejs.org/v2/guide/conditional.html#v-show ) 指令，尽管该组件会一直存在并被隐藏。您可以在此处阅读有关v-ifvs的更多信息： https ://vuejs.org/v2/guide/conditional.html#v-if-vs-v-showv-show. 这是在应用程序中隐藏和显示模式的一种非常常见的范例——这是一个很好地展示了这一点的示例：https ://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>

应用程序.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>
于 2017-04-20T05:17:12.480 回答
3

根据关于 VueJs 的文档，您可以从 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
})

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

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

于 2017-09-17T23:45:11.567 回答
1

我做这种事情的一种方法是example2使用以下设置创建您的组件：

<template>
  <div>
    <div v-if="inited">
      <div>{{foo}}</div>
      <div>{{bar}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        foo: '',
        bar: '',
        inited: false
      }
    },
    mounted() {
      var me = this
      axios.get('/my/ajax/call').then(function(response) {
        me.foo = response.data.foo
        me.bar = response.data.bar
        me.inited = true
      })
    }
  }
</script>

基本上，只要组件被挂载，它就会以空信息呈现，直到 AJAX 调用完成，然后响应式数据将被更新，Vue 将自动更新响应式数据元素。如果您不想在模板中看到其他标记或内容，您始终可以创建一个inited: false数据属性并true在 AJAX 回调中将其设置为，然后使用包装器上的:v-if="inited"or:v-show="inited"指令div隐藏组件的内容，直到AJAX 调用返回。

于 2017-04-19T16:10:11.727 回答
0

Vue 3 - 重大更改

异步组件现在需要defineAsyncComponent辅助方法：

// vue 2.x
const asyncPage = () => import('./NextPage.vue')

// vue 3.x
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

另一个重大变化是在定义附加选项时component选项被重命名为：loader

const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})

文档：https ://v3.vuejs.org/guide/migration/async-components.html#_3-x-syntax

于 2020-10-31T19:35:47.627 回答