vueコンポーネントオブジェクト内の親の小道具の値にアクセスする方法は？

Question

要素UIキットに複数の制限を持つ2つのオプショングループを作成しようとしています。私の場合、私はmultiple-limit値に従って選択を防ぐために@handleOptionClickというメソッドを呼び出します。 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'] 
} 

別のオプションは、この経由でchilcomponentで直接親にアクセスするためにofcourseのです$親

あなたはこのために計算された小道具を定義することができます。

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