动态渲染 Bootstrap Vue Dropdown 元素

Posted 2023-02-22

【中文标题】动态渲染 Bootstrap Vue Dropdown 元素

【英文标题】：Dynamically render Bootstrap Vue Dropdown elements

【发布时间】：2021-01-30 19:38:52

【问题描述】：

我正在使用 Bootstrap Vue 构建一个可重用的 Drowndown 组件。我想动态呈现不同的元素：项目、标题和分隔符。我该怎么做？

所以我想要实现的是这样的 Dropdown 组件：

<template>
    <b-dropdown>
      <b-dropdown-option.element 
        v-bind:key="index"
        v-for="option in data"
        :value="option.id"
        > option.value </b-dropdown-option.element
      >
    </b-dropdown>
</template>

<script>
export default 
  name: 'Dropdown',
  props: 
    data: data
  

</script>

这样它会像这样呈现

    <b-dropdown-title>I am a title</b-dropdown-title>
    <b-dropdown-item>And I am an item</b-dropdown-item>
    <b-dropdown-item>I am another item</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>

然后从父组件，我可以传递如下数据：

<Dropdown id="modules-dropdown" v-data="data"></Dropdown>

import Dropdown from './Dropdown'
const dropdownData = [id: 1, value: 'I am a title', element: 'title', id: 2, value: 'And I am an item', element: 'item', id: 3, value: 'I am another item', element: 'item', id: 4, element: 'divider'] 
export default 
  name: 'ParentComponent',
  components: 
    Dropdown
  ,
  data () 
    return 
      data: dropdownData,
    
  ,

【参考方案1】：

您需要的是Dynamic Component，它允许您使用is 属性定义应呈现的组件。

new Vue(
  el: '#app',
  data() 
    return 
      options: [
         value: "Hello", element: 'header' ,
         value: "Item 1", element: 'item' ,
         value: "Item 2", element: 'item' ,
         value: null, element: 'divider' ,
         value: "Item 3", element: 'item' ,
         value: "Item 4", element: 'item' 
      ]
    
  
)

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.css" rel="stylesheet" />


<div id="app">
  <b-dropdown text="Dropdown">
    <component 
      :is="`b-dropdown-$option.element`" 
      v-for="(option, index) in options"
      :key="index" 
    >
       option.value 
    </component>
  </b-dropdown>
</div>