将一串数据从父组件传递给子组件。 Vue.js 2

Posted 2023-03-07

【中文标题】将一串数据从父组件传递给子组件。 Vue.js 2

【英文标题】：Pass one string piece of data from parent component to child. Vue.js 2

【发布时间】：2021-12-24 03:33:02

【问题描述】：

希望有人能看到我犯的一个简单错误并帮助我纠正它。

我正在尝试将一个字符串变量作为道具从父母传递给孩子。该字符串显示在复选框选择中。共有三个，根据选择哪个，将传递关联的名称。

基本上，如果选中不同的复选框，则会显示一些组件。我可以清楚地看到我传递的变量很好地显示在父组件中。我以提供的方法将其注销。但是，它不会传递给子组件。我在那里注销并得到未定义的结果。

我尝试了多种解决方案，并阅读了有关传递道具的信息，但没有任何效果。

父组件如下所示。

<template>

  <v-col>
    <v-checkbox
      label="LS"
      color="primary"
      value="ls"
      v-model="checkedSensor"
      @change="check($event)"
      hide-details
    /></v-checkbox>
  </v-col>

  <v-col cols="2" class="mx-auto">
    <v-checkbox
      label="DG"
      color="primary"
      value="dg"
      v-model="checkedSensor"
      @change="check($event)"
      hide-details
     />
   </v-col>

   <v-col cols="2" class="mx-auto">
     <v-checkbox
       label="CR"
       color="primary"
       value="cr"
       v-model="checkedSensor"
       @change="check($event)"
       hide-details
     />

     <ls-sensor v-if="lsSensor" :sensorType="checkedSensor" />

</template>

<script>

  export default

    data() 
      return 
        checkedSensor: " ",
        lsSensor: false,
        dgSensor: false,
        crSensor: false,
      ;
    ,

    methods: 

      check: function (e) 
        this.showDeviceComponent(e);
      ,

      showDeviceComponent(e) 

        if (e == "ls") 

          this.lsSensor = true;
          this.crSensor = false;
          this.dgSensor = true;

          console.log("file input component", this.checkedSensor)

         else if (e == "dg") 

          this.dgSensor = true;
          this.lsSensor = false;
          this.crSensor = false;

         else 

          this.crSensor = true;
          this.dgSensor = false;
          this.lsSensor = false;

        

      ,

    ,

  
</script>

子组件（只是将脚本放在这里，因为我还没有将它放在模板中。在安装的方法中，我应该看到来自道具的值。它显示为未定义。哎呀..多么愚蠢我犯了一个错误？非常感谢您的帮助。

export default 

   props:['sensorType'],

   data() 
     return 
       coating: false,
     ;
    ,

    mounted() 
      console.log("required input component, sensor type", this.sensorType)
    ,

    components: 

      coatings: require("@/components/shared/FormData/Coatings.vue").default,
      "ls-sensor-panel": require("@/components/shared/FormData/LS_SensorPanel.vue").default,
    ,
  ;

【问题讨论】：

如果您只有一个具有一个值的模型，那么您可能应该使用v-radio，但我无法从您的代码中真正看到它是如何从字符串 ` ` 到 undefined 的，但如果它根本没有显示它可能是因为当检查时它会触发所有其他事件的事件，然后可能由于堆栈影响值的顺序而根本没有显示它

如果您使用多个具有相同模型的复选框，那么它似乎也是一个数组而不是字符串vuetifyjs.com/en/components/checkboxes/#model-as-array

@LawrenceCherone 我想知道检查事件是否以某种方式让父组件可以很好地看到它，但也许生命周期钩子会变得扭曲并且没有正确传递它？我在这里进行了疯狂的猜测，尽管在复选框上只有一个被选中。一旦发生这种情况，其他人就不会被触及。他们还需要在数组中吗？

不确定，虽然 id 重构代码以使用 <component :is="checkedSensor" /> 并在复选框上设置值以设置要使用的组件 (input-value="ls-sensor") 然后使用 v-bind 添加不同的道具，它将省去所有布尔切换

@LawrenceCherone 感谢您的帮助。我发现了我的问题。传递道具时我做的一切都是正确的，但我掩饰的是我在这两个中间有另一个组件。那就是发送道具的地方。一个大的荷马“doooohhhh”出来了。我将在下面发布我的回复

【参考方案1】：

唯一让我印象深刻的是，当您创建驼峰式属性名称时，我很确定这些属性名称必须写为组件上的 dash (-) 分隔属性？

<ls-sensor v-if="lsSensor" :sensor-type="checkedSensor" />

所以prop: ['sensorType'] 被传递为:sensor-type=""

【讨论】：

你肯定就在那里。我昨天也遇到了同样的事情。如果我没有发现它并与我的疏忽一起修复它，那将会弹出。这导致了这个问题。傻我。我只是想念我所做的以及为什么会发生这种情况。