vue 在点击时渲染组件答案

【问题标题】：vue render components on clickvue 在点击时渲染组件
【发布时间】：2021-08-07 03:34:21
【问题描述】：

我有一个名为 customer-type 的组件。

我确实有全年，我也有很多组件。所以我想减少渲染。

点击renderComponent后如何加载组件？

<template v-for="(date, index) in daysOfYear">
  <b-tr :key="date" :id="`row-${getDay(date)}`">
    <customer-type :id="`customer-${index}`" @test="setCustomer" v-bind:listTypes="listTypes"  />
    <button @click="renderComponent(index)"> </button>
  </b-tr>
</template>

methods: {
  renderComponent(index) {
  
  }
}

我不想在明确点击之前渲染组件。

【问题讨论】：

标签： vue.js vue-component vue-render-function

【解决方案1】：

您可以将daysOfYear 修改为一个对象列表，每个对象都有一个布尔值来使用v-if 显示/隐藏其customer-type 组件。

这是一个简单的演示：

const customertype = Vue.component('customertype', { template: '#customertype', props: ['id'] });

new Vue({
  el:"#app",
  components: { customertype },
  data: () => ({ 
    daysOfYear: ['01-01-2021','01-02-2021','01-03-2021']
  }),
  created() {
    this.daysOfYear = this.daysOfYear.map(date => ({ date, showCustomerType:false }));
  },
  methods: {
    renderComponent(index) {
      this.daysOfYear[index].showCustomerType = true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="customertype"><p>{{id}}</p></template>

<div id="app">
  <div v-for="({ date, showCustomerType }, index) in daysOfYear" :key="index">
    <button @click="renderComponent(index)">Show</button>
    <customertype 
      v-if="showCustomerType" 
      :id="`customer-${index}`"
    />
  </div>
</div>

【讨论】：

【解决方案2】：

@Majed 是对的。基本上，v-if 只会在满足条件时渲染 DOM 中的元素。另一种选择是v-show 基本上它的工作方式与v-if 相同，不同之处在于v-show 将始终在DOM 中呈现元素而v-if 不会

【讨论】：