VueJs验证父组件中的子组件名称-Java 学习之路

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

Parent.vue？e9d7：xx Uncaught TypeError：无法读取未定义的属性'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>

1 回答

1
可以从中访问components属性
```
this.$options.components
```
所以你的功能可以
```
isValidComponent(name){
  return !!this.$options.components[name];
}
```
其中name是组件的名称 . 我无法真正告诉你在传递的是什么 componentArgs .

Example .
回复于 2024-05-08T21:07:01+08:00

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

1 回答

相关问题