Vue.js - 在組件中使用父數據

Question

如何在我的子組件Post中訪問父數據變量（limitByNumber）？

我試圖使用道具，但它不起作用。

家長：

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>

Answer 1

選項1

使用this.$parent.limitByNumber來自子組件的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>

Answer 2

如果要訪問某些特定父級，可以將所有組件命名為：

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