如果可用，检查子组件中的道具值

Posted 2023-02-16

【中文标题】如果可用，检查子组件中的道具值

【英文标题】：check props value in child component if available

【发布时间】：2021-12-02 22:55:29

【问题描述】：

我目前正在使用BootstrapVue。

我的 parent.vue 中有一个 b-dropdown，我可以在其中选择 JSON 文件的对象并将其转换为数组，因为我需要这个 json 对象的长度。 这很好用！

我的问题是我需要检查我的 parent.vue 是否选择了某些东西 - 所以如果 this.arrayLength 高于 0 （直到此时它运行良好！） 。如果这是真的，它应该在我的child.vue 中使用并显示addElementsNotClickable()，其中不能添加任何元素（输入的计数等于数组的长度） - 否则它应该使用并显示我的按钮addElement()，其中多个可以手动添加元素。

但如果arrayLenght > 0... 并且我不知道在第二个按钮上使用什么，例如@change(??)，我无法签入我的 child.vue。我能解决吗？

非常感谢！我已经尽量详细了！

附加信息：我没有收到错误代码！！

我的父母.vue：

methods: 
  inputedValue(input, index) 
    var array = [];
    const item= this.json.find((i) => i.Number === input);
    for (let key in item.ID) 
      array.push(item.ID[key]);
    
    if(array.length > 0) 
      this.getIndex = index;
      this.getDataArray = array;
      this.getLengthArray = array.length;
    
  

我的 child.vue（模板）

<div class="mt-4 mb-5 ml-3 mr-3">
  <b-button v-if="!hide" @click="addElement" variant="block">Add Element</b-button>
  <b-button v-if="hide" @???="addElementNotClickable" variant="block">Not clickable ! </b-button>
</div>

我的 child.vue（脚本）

methods: 
  addElementsNotClickable() 
      for(let i = 1; i < this.arrayLength; i++) 
        this.inputs.push()
      
  ,

  addElement() 
      this.inputs.push()   
  ,


data() 
  return 
    inputs: []
    arrayLength: this.getLengthArray,
    arrayIndex: this.getIndex,
    hide: false,


props: [
    "getLengthArray",
    "getIndex"
    ],

【问题讨论】：

所以看看我们是否理解。如果arrayIndex > 0，您想为您的NOT CLICKABLE div 添加一个侦听器？这个问题似乎不太清楚

这是我需要的第一件事——但更大的问题是如何检查我的 Child.vue if array.length > 0

【参考方案1】：

您误解了组件在 Vue 中的工作方式。简而言之，您可以通过以下方式理解它们：

父母向下发送道具，孩子向上发送事件

您正在寻找的是，每当您的arrayLength 更新时，您都会向父级发送一个事件。然后，处理该事件是父级的责任。在这种情况下，父级将接收事件并存储数组的长度。

父.vue

<template>
  <div> 
    <child @arrayLenght:update="onArrayLenghtUpdate"/>
  </div>
</template>

<script>
export default 
  data: () => 
    arrayLength: 0,
  ,
  methods: 
    onArrayLenghtUpdate(length) 
      this.arrayLength = length;
    
  

</script>

Child.vue

<template>  ... </template>
<script>
export default 
  data: () => (
    arrayLength: 0,
  ),
  watch: 
    arrayLenghth: function (newLenght) 
       this.$emit('arrayLenght:update', newLenght);
    
  

</script>

如果您的Parent 和Child 没有高度耦合在一起，这是标准方法并且非常有用。如果它们相互依赖（您不会在应用程序的其他任何地方使用Child.vue。就像Parent.vue 的直接子级一样），那么您可以使用inject/provide 方法。这种方法超出了这个答案的范围，请随时阅读article on it

【讨论】：

我了解components 的工作原理。但是我需要从我的父母那里发送一个道具，因为他们我正在选择我的option - 在我的孩子中，如果选择了某些东西，我需要检查每个元素。所以我的父母很可能就像一个导航栏，而我的孩子就是这个导航栏中的一切。

感谢您的帮助！