vue.js - 如何在vue组件对象中访问 parent 的props值？

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

您应该将 parent 的属性传递给 child 。

父级:

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

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

child

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

    export default {
      props: ['mydata']
    }

另一个选项当然是通过 this.$parent 直接在子组件中访问父级

您可以为此定义一个计算 Prop

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