如何在vue組件對象中訪問父母的道具值？

Question

我試圖在元素UI工具包中製作兩個具有多種限制的選項組。在我的情況下，我調用的方法爲@handleOptionClick，以防止根據multiple-limit的值進行選擇。如何在handleGroupedOption函數中訪問此multiple-limit？

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

Answer 1

你應該把父母的財產傳給孩子。

家長：

<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'] 
} 

另一個選項是ofcourse直接通過這個$父訪問父在chilcomponent

您可以定義一個計算的道具這一點。

computed { 
    parentData: function() { 
    return this.$parent.$data; // or whatever you want to access 
    } 
}