web-dev-qa-db-fra.com

Vue.js - Utilisation des données parent dans le composant

Comment puis-je accéder à la variable de données du parent (limitByNumber) dans mon composant enfant Post?

J'ai essayé d'utiliser des accessoires mais cela ne fonctionne pas.

Parent:

import Post from './components/Post.vue';

new Vue ({
    el: 'body',

    components: { Post },

    data: {
        limitByNumber: 4
    }
});

Poste du composant:

<template>
            <div class="Post" v-for="post in list | limitBy limitByNumber">
                <!-- Blog Post -->
....
</div>
</template>


<!-- script -->    
<script>
        export default {
            props: ['list', 'limitByNumber'],


            created() {
                this.list = JSON.parse(this.list);
            }

        }
</script>
javascriptvue.jsvue-component
24
Michał Lipa

Option 1

Utilisation this.$parent.limitByNumber du composant enfant. Donc, votre modèle de composant serait comme ceci

<template>
    <div class="Post" v-for="post in list | limitBy this.$parent.limitByNumber">                
    </div>
</template>

Option 2

Si vous souhaitez utiliser des accessoires, vous pouvez également réaliser ce que vous voulez. Comme ça.

Parent

<template>
   <post :limit="limitByNumber"></post>
</template>
<script>
export default {
    data () {
        return {
            limitByNumber: 4
        }
    }
}
</script>

Pots pour enfants

<template>
            <div class="Post" v-for="post in list | limitBy limit">
                <!-- Blog Post -->
....
</div>
</template>


<!-- script -->    
<script>
        export default {
            props: ['list', 'limit'],


            created() {
                this.list = JSON.parse(this.list);
            }

        }
</script>
50
Yerko Palma

Si vous souhaitez accéder à un parent spécifique, vous pouvez nommer tous les composants comme ceci:

export default {
  name: 'LayoutDefault'

Et puis ajoutez une fonction (peut-être comme vue.prototype ou Mixin si vous en avez besoin dans tous vos composants). Quelque chose comme ça devrait le faire:

getParent(name){
      let p = this.$parent;
      while(typeof p !== 'undefined'){
        if(p.$options.name == name) {
          return p;
        }else {
          p = p.$parent;
        }
      }
      return false;
    }

et l'utilisation pourrait être comme ceci:

this.getParent('LayoutDefault').myVariableOrMethod
1
Catch