Vue.js - Использование родительских данных в компоненте

Как я могу получить доступ к родительской переменной данных (limitByNumber) в моем дочернем компоненте Post?

Я пробовал использовать опору, но она не работает.

Родитель:

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

new Vue ({
    el: 'body',

    components: { Post },

    data: {
        limitByNumber: 4
    }
});

Сообщение о компоненте:

<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>

javascript vue.js vue-component
person Michał Lipa    schedule 19.04.2016    source источник

Ответы (2)


arrow_upward
85
arrow_downward

Опция 1

Используйте this.$parent.limitByNumber из дочернего компонента. Итак, ваш шаблон компонента будет таким

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

Вариант 2

Если вы хотите использовать реквизит, вы также можете добиться того, чего хотите. Нравится.

Родитель

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

Дочерние горшки

<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>
person Yerko Palma    schedule 19.04.2016
comment
вам не нужен this. перед $parent. - person Frank Nocke; 19.11.2018
comment
Есть ли способ сделать что-то вроде $(this).closest('#parent_element_id') в jQuery? Несмотря на то, что this.$parent довольно хорош, в одном из моих компонентов я получил такие вещи, как: this.$parent.$parent.$parent.$parent.xxxx… Нужен быстрый способ рефакторинга этой странности =) - person pilat; 13.01.2019
comment
@pilat Вы когда-нибудь находили решение? - person Sarpdoruk Tahmaz; 15.02.2019
comment
или для вас @pilat? - person ; 25.09.2019
comment
@pilat Вещи, которые помогли мне в этой ситуации: - Обычно используйте $emit() для передачи изменений родителю (и их родителям, и их родителям ...). - С DOM можно взаимодействовать с помощью атрибутов ref (атрибут google vue ref). Это в основном для компонента, взаимодействующего со своим DOM, обычно не со своими родителями. - Если вам действительно нужно что-то изменить в иерархии DOM, рассмотрите возможность использования Vue Portal: linusborg.github.io / portal-vue - person Peter Krebs; 20.12.2019
comment
если $parent.$parent.$parent, к которому вы пытаетесь получить доступ, является корневым компонентом, вы можете получить к нему доступ напрямую с помощью $root @pilat, я знаю, что это годовой комментарий, но, возможно, он поможет кому-то другому. - person Edu Ruiz; 05.02.2021

arrow_upward
8
arrow_downward

Если вы хотите получить доступ к определенному родительскому элементу, вы можете назвать все компоненты следующим образом:

export default {
  name: 'LayoutDefault'

А затем добавьте какую-нибудь функцию (например, vue.prototype или Mixin, если она вам нужна во всех ваших компонентах). Что-то вроде этого должно сработать:

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

и использование могло быть таким:

this.getParent('LayoutDefault').myVariableOrMethod
person Catch    schedule 19.06.2019
comment
Предполагается, что все ваши родительские компоненты в дереве имеют уникальные имена (которые они должны иметь в любом случае), но это довольно крутой вариант для того, что мне нужно сделать прямо сейчас, так что спасибо - person Arnaud Bouchot; 08.11.2019