Question

我正在使用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中，默认解析（如显示）当我调用组件时，我不知道如何在页面中传递解析并拒绝此方法的键。

Answer 1

您可以使用样式方式在vue 2中使用async组件。正确使用异步组件可以减少项目加载时间。您可以像以下一样使用异步组件：

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中的异步组件，resolve参数是异步调用成功时调用的函数，因此您的require（）调用需要在被调用的resolve函数内。您只需要删除require（）调用中的括号，并按如下方式格式化该行：

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

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

要通过单击按钮显示/隐藏Example2组件，您必须在data()功能中添加反应数据属性。然后，如果您查看App.vue的模板，我们将使用v-if（https://vuejs.org/v2/guide/conditional.html#v-if）指令在虚拟DOM中添加/删除Example2组件。你也可以很容易地在这里使用v-show（https://vuejs.org/v2/guide/conditional.html#v-show）指令，尽管该组件会粘在一起并且只是被隐藏。您可以在此处详细了解v-if vs v-show：https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-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>

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

根据documentation on 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
})

您可以将此项与built in component结合使用，动态加载您的组件。

编辑：提及documentation的更新链接。

Answer 4

我做过这种事情的一种方法是使用以下设置创建您的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数据属性并在AJAX回调中将其设置为true，然后使用{包装器:v-if="inited"上的{1}}或:v-show="inited"指令隐藏组件的内容，直到AJAX调用返回。

Answer 5

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

我如何使用Vue Async组件？

5 个答案:

main.js

Example2.vue

App.vue

Vue 3-重大更改