Vue.js 概率始终未定义

Posted 2023-02-23

【中文标题】Vue.js 概率始终未定义

【英文标题】：Vue.js prob is always undefined

【发布时间】：2022-01-18 04:24:00

【问题描述】：

您好，我是 Vue 新手并尝试使用 probs，但在我的组件中我无法使用 prob-data，因为 probs 始终未定义并且在 Vue-Debugger 中显示为 $attrs。

我的计划： 我想使用 TabWrapper 组件来填充 Modal-Component-Slot。有一个用于多个 .现在我想通过 probs 将数据传递给定义“标题”和选定状态，默认值为 false！然而，在这里，我的问题显然无法识别，因为它们在 Vue 调试器中显示为“attr”。

Vue-Debugger-Screenshot

parent.vue

.<template>
  <div class="options">
    <div class="textbox">
      <!-- todo -->
      <p class="login" @click="$refs.modalName.openModal()">Login / Registrieren</p>
      <p class="settings">Einstellungen</p>
      <p class="darkmode">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 class="tabs-wrapper">
  <div class="tabs-navigation">
    <ul>
      <li v-for="(tab, index) in tabs" :key="index">
        <div class="tabs-navigation-item"
            :class=" 'is-active': tab.isActive "
            @click="selectedTab(tab)">

             tab.name 

        </div>
      </li>
    </ul>
  </div>
    <div class="tabs-content">
        <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>

【参考方案1】：

@Evunex 是 props 而不是 probs。尝试更改拼写，看看是否可行。

【讨论】：

非常感谢您。我太专注于逻辑，没看到

没问题@Evunex。乐于助人:)