如何在vue组件对象中访问父类的props值?

时间:2017-04-25 08:31:29

标签: vue.js vuejs2 vue-component

我正在尝试在元素UI工具包中创建两个具有多个限制的选项组。在我的例子中,我调用@handleOptionClick方法来阻止根据multiple-limit值进行选择。如何在multiple-limit函数中访问此handleGroupedOption

<el-select v-model="filterBy[filterKey]" @handleOptionClick="handleGroupedOption" placeholder="Filter By Incident" multiple>
    <el-option-group label="Select one" multiple-limit="1">
        <el-option
                v-for="(item, key, index) in makeList(mainTypes[filterKey])"
                v-if="index < 3"
                :label="item"
                :value="key">
        </el-option>
    </el-option-group>
    <el-option-group label="Select multiple" multiple-limit="0">
        <el-option
                v-for="(item, key, index) in makeList(mainTypes[filterKey])"
                v-if="index >= 3"
                :label="item"
                :value="key">
        </el-option>
    </el-option-group>
</el-select>


export default {
  methods: {
    handleGroupedOption (event) {
     console.log(event)
    }
  }
}

1 个答案:

答案 0 :(得分:0)

您应该将父属性传递给孩子。

父:

<template>
   <div class="parent">
       <my-child :mydata="mydata"></my-child>
   </div>
</template>

export default {
  data: function() {
    return { mydata: ["a", "b"] }
  }
}

<template>
   <div class="child">
       <div v-for="data in mydata">
          {{ data }}
       </div>
   </div>
</template>

export default {
  props: ['mydata']
}

其他选项是通过此方式直接在您的chilcomponent中访问父级。$ parent

您可以为此

定义计算道具
computed {
  parentData: function() {
     return this.$parent.$data; // or whatever you want to access
  }
}