根据 v-if 传递组件 - Vue.JS答案

【问题标题】：pass component according to v-if - Vue.JS根据 v-if 传递组件 - Vue.JS
【发布时间】：2021-01-20 12:07:43
【问题描述】：

我正在尝试创建一个包含各种图形的父组件，并根据我需要将特定图形（抚养一个孩子）传递给另一个组件，但我不一定知道我将如何动态地做它为用户。

我的 html 图表 (chart.vue)

    <template>  
        <div >
          <bars v-if="type == 'bar'">
             <div class="row gutter-sm">
                <div class="col-md-3"> 
                   <apexchart  ref="chart1" type="bar" :options="options" :series="updatedData"></apexchart>
                </div>
             </div> 
                <div class="col-md-3"> 
                   <apexchart ref="chart3" type="bar" :options="options3" :series="updatedData"></apexchart>
                </div>
           </bars>
           <lines v-if="type == 'line'">
              <div class="row gutter-sm">
                <div class="col-md-3"> 
                   <apexchart ref="chart4" type="line" :options="options4" :series="updatedData"></apexchart>
                </div>  
             </div>
           </lines>
       </div>
    <template>

如果我想将条形图传递给我的 menu.vue，会是这样吗？

我的 html 菜单

    <template>  
        <div >
          <table class="data-table-2" style="min-width: 800px">
             <charts type="bar"/>
          </table>
       </div>
    <template>

脚本菜单

   <script>
   
       import charts from "./charts.vue"
       
       export default {
         name: 'menu',
         components: {
            charts
         }
       }
    </script>

【问题讨论】：

父组件传值给子组件时，子组件需要在props中接收，值的类型和默认值也可以设置

标签： javascript vue.js quasar-framework

【解决方案1】：

父组件向子组件传值的方式不对

<template>  
    <div >
      <table class="data-table-2" style="min-width: 800px">
         <charts :type='bar'/>
         <charts :type='line'/>
         <charts />
      </table>
   </div>
<template>

子组件接收值，可以设置默认值：

// init in child component
props: {
  type: {
    type: String,
    default: 'bar' // set a default value
  }
},
data(){
 ...
}

然后你可以在子组件中使用类型

<template>  
    <div >
      <bars v-if"type == 'bar'">
         <div class="row gutter-sm">
            <div class="col-md-3"> 
               <apexchart  ref="chart1" type="bar" :options="options" :series="updatedData"></apexchart>
            </div>
         </div> 
            <div class="col-md-3"> 
               <apexchart ref="chart3" type="bar" :options="options3" :series="updatedData"></apexchart>
            </div>
       </bars>
       <lines v-if"type == 'line'">
          <div class="row gutter-sm">
            <div class="col-md-3"> 
               <apexchart ref="chart4" type="line" :options="options4" :series="updatedData"></apexchart>
            </div>  
         </div>
       </lines>
   </div>
<template>

【讨论】：

如果我想传递 2 个子组件，我插入两个道具？
@Christian Guimarães props init in child Component,
不幸的是，仍然缺少一些东西，我的组件没有在屏幕上重新授权
@Christian Guimarães 可以在子组件的生命周期内控制台类型看是否收到值

【解决方案2】：

您需要在子组件中定义一个 Props。

//Child Component Script
export default ChildComponent {
    data() {
        return {}
    },
    props: {
        type: string,
    }
}

在父组件中，您需要调用子组件并像这样传递类型数据 //父组件

<template>
    <div>
        <child-component :type="line"/>
    </div>
</template>

【讨论】：