web-dev-qa-db-fra.com

Vue.js chargement de composants à fichier unique

Je suis nouveau sur Vue.js et je souhaite utiliser des composants à fichier unique, mais je ne comprends pas le flux de travail.

Par exemple, j'ai trois composants: App, Grid et List

App.vue

<template>
    <div id="app">
        <div id="grid"></div>
        <div id="right"></div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue!'
            }
        }
    }
</script>

Grid.vue

<template>
    <div id="left"></div>
</template>

<script>
    export default {
        name: 'grid',
        data: function () {
            return {
                grid: 'some-data'
            }
        }
    }
</script>

List.vue

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

Main.js

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

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

new Vue({
    el: '#grid',
    render: h => h(Grid)
});

new Vue({
    el: '#right',
    render: h => h(PatternList)
});

Cela fonctionne, mais j'espère que ce n'est pas la bonne façon de créer des composants imbriqués.

Quelqu'un peut-il montrer comment cela doit être fait? Merci

javascriptvuejs2vue-component
18
Dmitry

Vous pouvez enregistrer des composants à l'aide de Vue.component méthode :

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);

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

Et puis ajoutez-les directement au modèle App en utilisant leur nom de balise:

<template>
  <div id="app">
    <grid></grid>
    <pattern-list></pattern-list>
  </div>
</template>

Cela enregistre les composants globalement, ce qui signifie que toute instance Vue peut ajouter ces composants à leurs modèles sans configuration supplémentaire.

Vous pouvez également enregistrer des composants dans une instance Vue, comme ceci:

new Vue({
  el: '#app',
  render: h => h(App),
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});

Ou dans la balise script d'un composant à fichier unique:

<script>
import Grid from './vue/Grid.vue'

export default {
  name: 'app',
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});
</script>

Cela enregistre les composants uniquement dans cette instance Vue, ce qui signifie que ces composants enregistrés ne seront disponibles que dans le modèle pour cette instance Vue. Un composant enfant) n'aurait pas accès à ces composants enregistrés à moins que ces composants ne soient également enregistrés auprès de l'instance enfant Vue.

55
thanksd