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.