VueJs 验证父组件中的子组件名称

Question

我有一个如下所示的父组件，它实现了动态组件切换。挑战在于我想确保索引 0 处的 componentArgs name 数据有效。 this.components.indexOf(componentArgs[0]) > -1 行会引发 TypeError。

Parent.vue?e9d7:xx Uncaught TypeError: Cannot read property 'indexOf' 未定义的

显然，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

components 属性可以从

访问

this.$options.components

所以你的功能可能是

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

其中 name 是组件的名称。我真的不知道你在 componentArgs 中传递了什么。

Example.