Vue.js。根据条件列表渲染不同种类的子组件

Question

我刚接触not OOP，尤其是VUE.JS。

我有一个条件列表，根据它们我应该在页面上显示几种不同的组件。

例如，我如何呈现2个TextInput组件(或3.10)点击按钮后，在parent中动态读取输入的文本？

提前谢谢你。

Answer 1

您没有提供任何代码，所以我不确定您到底想要做什么。

如果您想要显示多个组件，只需使用v-for并在v-if中指定条件，这将决定是否呈现此特定组件：

<input 
  v-for="input in inputs" 
  v-if="input.show"
  v-model="input.model"
  :placeholder="input.label" 
  type="text"
>

<button @click="handleButtonClick()">Button text</button>

data: () => ({
  inputs: [
    { 
      label: 'input 1', 
      model: '',
      show: true
    },
    { 
      label: 'input 2', 
      model: '',
      show: true
    }
  ]
}),
methods: {
  handleButtonClick () {
    console.log(this.inputs)
  }
}

Answer 2

如果您不知道需要显示的组件类型，可以使用dynamic components。

简而言之，这会根据值延迟运行时使用的组件类型。

让我们假设您有两种不同类型的组件

• TextComponent
• ImageComponent

你可以有一个项目列表

data () {
 return {
   items: [
     {
      id: 1,
      val: 'something',
      type: 'TextComponent'
     },
     {
      id: 2,
      val: 'something',
      type: 'ImageComponent'
     }
   ]
 }
}

现在您可以遍历列表并显示基于type的组件

<component v-for="item in items" :key="item.id" :is="item.type" v-model="item.value />

如果type不是组件的确切名称，您可以在:is条件中对其进行转换。就像这样。

:is="getComponentFromTag(item.type)"

然后编写转换方法

methods: {
 getComponentFromTag (tag) {
   switch (tag) {
     case 'text':
       return 'TextComponent'
     case 'img':
       return 'ImageComponent'
   }
 }
}

对于上面的例子，我假设items是这样的：

items: [
     {
      id: 1,
      val: 'something',
      type: 'text'
     },
     {
      id: 2,
      val: 'something',
      type: 'img'
     }
   ]