Hello i am new to Vue and trying to use probs, but in my component i cant use the prob-data, because the probs are always undefined and appears as $attrs in the Vue-Debugger.

My Plan: I want to Use the TabWrapper Component to fill the Modal-Component-Slot. The has an unnamed slot for multiple . Now i want to pass data via probs to the to define the "title" and the selected status, which has a default of false! Here, however, my probs are apparently not recognized because they appear as "attr" in the Vue debugger.

Vue-Debugger-Screenshot

parent.vue

.<template>
  <div >
    <div >
      <!-- todo -->
      <p  @click="$refs.modalName.openModal()">Login / Registrieren</p>
      <p >Einstellungen</p>
      <p >Dunkles Design
        <input @click="toggleTheme" type="checkbox" name="switch" id="switch">
        <label for="switch"></label>
      </p>
    </div>
  </div>

  <!-- User-Settings-Modal -->
  <BasicModal ref="modalName">

    <template v-slot:header>
        <h1>Modal title</h1>
    </template>

    <template v-slot:body>

      <TabWrapper>
        <Tab title="Title-A" :selected="true">
           Demo Content: A
        </Tab>
        <Tab title="Title-B" >
           Demo Content: B
        </Tab>
        <Tab title="Title-C">
           Demo Content: C
        </Tab>
        <Tab title="Title-D">
           Demo Content: D
        </Tab>
      </TabWrapper>

    </template>
    
  </BasicModal>

</template>

<script>
import BasicModal from '@/components/Ui/BasicModal.vue'
import TabWrapper from '@/components/Ui/TabWrapper.vue'
import Tab from '@/components/Ui/Tab.vue'

export default {
  components: {
    BasicModal,
    TabWrapper,
    Tab
  },
  data() {
    return {
      theme: ''
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme == 'darkMode' ? 'root' : 'darkMode'
      document.documentElement.setAttribute('data-theme', this.theme);
    }
  }
}
</script>

tabwrapper.vue

<template>
<div >
  <div >
    <ul>
      <li v-for="(tab, index) in tabs" :key="index">
        <div 
            :
            @click="selectedTab(tab)">

            {{ tab.name }}

        </div>
      </li>
    </ul>
  </div>
    <div >
        <slot></slot>
    </div>
</div>

</template>

<script>
export default {
  data() {
    return {
      tabs: []
    }
  },
  methods: {
    selectedTab(selectedTab) {
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name === selectedTab.name);
      });
    }
  }
}
</script>

tab.vue

<template>
    <div v-show="isActive">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        probs: {
            title: { required: true},
            selected: {
                type: Boolean,
                default: false
            }
         }
        ,
        data() {
            return {
                 isActive: this.selected,
                 name: this.title
            }
        },
        created() {
            console.log(this.title)
            this.$parent.tabs.push(this);
        }
    }
</script>

CodePudding user response：

@Evunex it's props not probs. Try changing the spelling and see if that works.