访问 b-table 槽中的父组件范围答案

【问题标题】：Access parent component scope in b-table slot访问 b-table 槽中的父组件范围
【发布时间】：2021-04-08 02:11:30
【问题描述】：

我在<b-table> 中使用v-slot，所以我可以创建一个链接。

链接的第一部分包含来自数据源的数据。但是，查询字符串有一个我需要包含在链接中的参数。如何获取包含查询字符串值的数据的范围，以便将查询字符串添加到我的v-slot 中的链接？

提前谢谢你，马蒂

<template>
   <div>
      <h1>View Users</h1>
      Select a user to edit

      <b-table striped :items="users">
         <template v-slot:cell(id)="data">
            <a :href="'/#/admin/user?userId=' + data.value + '&companyId=' + ##HERE## ">{{ data.value }}</a>
         </template>
      </b-table>
   </div>
</template>

export default {
  data() {
    return {
      users: [],
      companyId: ""
    }
  },
  methods: {
    getUsers() {
      var self = this;
      self.$client.get('/api/Admin/GetUsers?companyId=' + this.$route.query.companyId).then(response => {
        self._data.users = response.data;
      });
    }
  },
  mounted() {
    this.companyId = this.$route.query.companyId
    this.getUsers();
  }
}

【问题讨论】：

标签： javascript vue.js vue-component vue-router bootstrap-vue

【解决方案1】：

<a> 是传递到<b-table> 插槽的父内容，这意味着它可以访问父数据。所以你可以直接访问companyId，就像没有<b-table>一样：

<b-table striped :items="users">
   <template v-slot:cell(id)="data">
      <a :href="'/#/admin/user?userId=' + data.value + '&companyId=' + companyId">
      {{ data.value }}
      </a>
   </template>
</b-table>

对于路由链接，最好使用<router-link> 而不是<a> 标签：

<router-link :to="{
   path: '/admin/user',
   query: { userId: data.value, companyId: companyId }
}">
   {{ data.value }}
</router-link>

【讨论】：