VueJsは親コンポーネントの子コンポーネント名を検証します

Question

以下に示すように、動的コンポーネントの切り替えを実装する親コンポーネントがあります。問題は、インデックス0のcomponentArgs nameデータが有効であることを確認することです。行this.components.indexOf(componentArgs[0]) > -1はTypeErrorをスローします。

Parent.vue?e9d7:xx Uncaught TypeError: Cannot read property 'indexOf' of undefined

明らかに、this.componentsは、親コンポーネントにアクセスする正しい方法ではありません。これをどのように達成するのですか？

<template> 
    <component v-bind:is="currentForm" v-on:switchcomponent="switchComponent"></component>    
</template> 

<script> 
import Login from '@/components/Login' 
import Signup from '@/components/Signup' 

export default { 
    name: 'Parent', 
    components: { 
    login: Login, 
    signup: Signup 
    }, 
    data() { 
    return { 
     title: 'Sign Up or Login', 
     email: '', 
     currentForm: 'login' 
    } 
    }, 
    methods: { 
    switchComponent: function (componentArgs) { 
     // componentArgs format: [name, title, email (Use empty string if N/A.)] 
     let name = 0 
     let title = 1 
     let email = 2 
     console.log('component: ' + componentArgs) 

     if (this.isValidComponent(componentArgs)) { 
     this.currentForm = componentArgs[name] 
     this.title = componentArgs[title] 
     this.email = componentArgs[email] 
     } 
    }, 
    isValidComponent: function (componentArgs) { 
     let exactLength = 3 

     if (componentArgs.length === exactLength) { 
     console.log('components ' + this.components) 
     if (this.components.indexOf(componentArgs[0]) > -1) { 
      console.log('component exists') 
      return true 
     } 

     return false 
     } 

     return false 
    } 
    } 
} 
</script> 

Answer 1

コンポーネントのプロパティは、だからあなたの関数は名前がコンポーネントの名前です

isValidComponent(name){ 
    return !!this.$options.components[name]; 
} 

可能性があり

this.$options.components 

からアクセスすることができます。私はあなたが渡しているものを実際にcomponentArgsに伝えることはできません。

Example。