如何实现点击Vue组件中的链接才加载/执行子组件？

嗨，我来给你捋捋怎么实现这个需求～你要的是点击父组件里的链接才让子组件执行或者加载，刚好Vue有几种很贴合的方案，结合你的代码场景给你拆解下：

方案一：用v-if控制子组件渲染（最直接的方式） #

这个方案的核心是默认不渲染子组件，只有点击链接后才触发渲染，这样子组件的生命周期钩子（比如created、mounted）只有在渲染时才会执行，完全符合“点击后才执行”的要求。

具体实现步骤： #

1. 在父组件的状态里新增一个对象，用来记录哪些子组件需要显示（因为你是循环渲染多个item，所以需要对应每个item的独立状态）
2. 修改show方法，点击时切换对应item的显示状态
3. 在子组件的位置用v-if绑定这个状态，控制渲染

父组件代码示例（Vue2）：

<template>
  <ul class="list-group">
    <li v-for="item in invoices" class="list-group-item" :key="item.id">
      <div class="row">
        <!-- 你的其他内容 -->
        <div class="col-md-7">
          <a 
            href="javascript:" 
            class="toggle-show" 
            aria-expanded="false" 
            data-toggle="collapse" 
            :data-target="'#' + item.id" 
            @click="show(item.id)"
          >
            Show <span class="caret"></span>
          </a>
        </div>
      </div>
      <div class="collapse" :id="item.id">
        <!-- 子组件：只有点击对应链接后才会渲染 -->
        <ChildComponent v-if="showComponents[item.id]" :invoice="item" />
      </div>
    </li>
  </ul>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      invoices: [], // 你的发票数据列表
      showComponents: {} // 记录每个item对应的子组件是否显示
    }
  },
  methods: {
    show(itemId) {
      // 用$set确保新增的属性是响应式的（Vue2需要，Vue3不用）
      this.$set(this.showComponents, itemId, !this.showComponents[itemId])
      // 如果只需要点击一次就永久加载子组件，直接写：
      // this.$set(this.showComponents, itemId, true)
    }
  }
}
</script>

Vue3版本写法：

<template>
  <ul class="list-group">
    <li v-for="item in invoices" class="list-group-item" :key="item.id">
      <div class="row">
        <!-- 你的其他内容 -->
        <div class="col-md-7">
          <a 
            href="javascript:" 
            class="toggle-show" 
            aria-expanded="false" 
            data-toggle="collapse" 
            :data-target="'#' + item.id" 
            @click="show(item.id)"
          >
            Show <span class="caret"></span>
          </a>
        </div>
      </div>
      <div class="collapse" :id="item.id">
        <ChildComponent v-if="showComponents[item.id]" :invoice="item" />
      </div>
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

const invoices = [] // 你的发票数据列表
const showComponents = reactive({}) // 响应式对象记录显示状态

const show = (itemId) => {
  showComponents[itemId] = !showComponents[itemId]
}
</script>

方案二：异步组件+v-if（优化性能，懒加载子组件代码） #

如果你的子组件体积比较大，或者想实现点击后才加载子组件的代码文件（而不是页面初始化就加载），可以结合Vue的异步组件功能，进一步优化性能。

Vue2写法： #

// 在父组件的components选项里定义异步组件
components: {
  ChildComponent: () => import('./ChildComponent.vue')
}

之后依然用v-if控制渲染，只有当v-if为true时，才会去请求子组件的代码文件，加载完成后再渲染。

Vue3写法： #

<script setup>
import { defineAsyncComponent } from 'vue'
// 定义异步组件
const ChildComponent = defineAsyncComponent(() => import('./ChildComponent.vue'))
</script>

同样搭配v-if使用即可。

方案三：控制子组件方法执行（如果子组件已渲染，仅触发方法） #

如果你的需求是子组件已经渲染在页面中（只是隐藏），点击链接后仅执行子组件里的某个方法，而不是重新渲染，可以通过ref获取子组件实例，然后调用其方法：

Vue3示例：

<template>
  <ul class="list-group">
    <li v-for="item in invoices" class="list-group-item" :key="item.id">
      <div class="row">
        <!-- 你的其他内容 -->
        <div class="col-md-7">
          <a 
            href="javascript:" 
            class="toggle-show" 
            aria-expanded="false" 
            data-toggle="collapse" 
            :data-target="'#' + item.id" 
            @click="triggerChildMethod(item.id)"
          >
            Show <span class="caret"></span>
          </a>
        </div>
      </div>
      <div class="collapse" :id="item.id">
        <ChildComponent ref="childRefs" :invoice="item" />
      </div>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const invoices = []
const childRefs = ref([]) // 存储所有子组件实例

const triggerChildMethod = (itemId) => {
  // 找到对应item的子组件实例
  const targetChild = childRefs.value.find(child => child.invoice.id === itemId)
  // 调用子组件里的方法，比如`loadData()`
  if (targetChild) targetChild.loadData()
}
</script>

注意：别用v-show！ #

很多人会混淆v-if和v-show，这里要强调：v-show只是通过CSS隐藏元素，子组件其实已经被渲染和初始化了，不符合你“点击后才执行/加载”的需求，所以一定要用v-if。

内容的提问来源于stack exchange，提问作者moses toh