vue.js - 如何在vue组件对象中访问 parent 的 Prop 值(value)?

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

最佳答案

您应该将 parent 的属性(property)转给 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直接在您的chilcomponent中访问父对象。

您可以为此定义一个计算的 Prop
computed {
  parentData: function() {
     return this.$parent.$data; // or whatever you want to access
  }
}

关于vue.js - 如何在vue组件对象中访问 parent 的 Prop 值(value)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43605462/

相关文章:

vue.js - Vuetify.js 数据表最初未排序

具有单选按钮动态列表的 Vue.js v-model

c# - dotnet 核心 : discontinued? 中的 Vue.js 模板

javascript - VueJS 2.0 : Using V-if to Check the Existence of a Custom Prop

javascript - 需要多个 Vue 组件的更简洁的方法?

vue.js - 在组件的样式部分使用 Vue 变量

javascript - 当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

javascript - 如何将 for 循环中的当前项目传递给 vue.js 2 中的方法?

javascript - 仅在首次加载时使用 nuxt.js 设置数据

firebase - VueJS 和 Firebase,刷新时历史模式 404 错误