web-dev-qa-db-ja.com

Vue非同期コンポーネントをどのように使用できますか？

laravel 5.4およびvue 2を使用しており、ボタンを使用してコンポーネントを非同期としてロードしたい。MyVue = 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では、デフォルトで解決されています（表示されているとおり）。コンポーネントを呼び出すときに、ページ内のこのメソッドにresolveキーとrejectキーをどのように渡せばよいかわかりません。

vue.jsvuejs2async-components
8
K1-Aria

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 。

9
Sukanta Bala

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 への更新されたリンク。

3
Gorky

Vue.jsの非同期コンポーネントの場合、resolve引数は非同期呼び出しが成功したときに呼び出される関数なので、require（）呼び出しは呼び出されたresolve関数内にある必要があります。 require（）コールでブラケットを削除し、その行を次のようにフォーマットするだけです。

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

以下の例では、基本的なsetTimeout()を使用して非同期呼び出しをエミュレートしています。 resolve関数は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_と_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>
_
3
dzwillia

この種のことをした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"または:v-show="inited"ディレクティブを使用してdivを実行し、AJAX呼び出しが戻ります。

1
dzwillia