Vue.js 概率始终未定义

Question

你好，我是 Vue 的新手，正在尝试使用概率，但在我的组件中我不能使用 prob-data，因为概率始终未定义并且在 Vue-Debugger 中显示为 $attrs。

我的计划：我想使用 TabWrapper 组件来填充 Modal-Component-Slot。有一个用于多个的未命名插槽。现在我想通过概率将数据传递给定义“标题”和选定状态，其默认值为 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>

Answer 1

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

Vue.js 概率始终未定义

Vue.js prob is always undefined

javascript

vue.js

vue-component

vue-props