如何在 Vue 中使用 slot 获取数据？

Posted 2023-02-16

【中文标题】如何在 Vue 中使用 slot 获取数据？

【英文标题】：How to fetch data with slot in Vue?

【发布时间】：2021-10-30 02:32:24

【问题描述】：

我有一个这样的代码块。

<template slot="name" slot-scope="row">row.value.first row.value.last</template>

我还有一个标题。

     isActive: true, age: 38, name:  first: 'Jami', last: 'Carney'  ,
     isActive: false, age: 27, name:  first: 'Essie', last: 'Dunlap'  ,
     isActive: true, age: 40, name:  first: 'Thor', last: 'Macdonald'  ,  

此代码运行正常，但我想显示来自我的 API 的数据。我需要知道哪些术语？我之前在 React 中使用过 Axios。我在哪里可以定义 Axios 方法？我需要更改模板槽而不是 :v-slot 吗？

【参考方案1】：

虽然您可以直接从组件代码内部进行 API 调用，但这并不意味着您应该这样做。最好将 API 调用解耦到一个单独的模块中。 这是一个正确遵循关注点分离 (SoC) 原则的好方法：

在src 下创建一个目录services（如果它还没有的话）。 在services 下，创建名为api.service.js 的新文件。

api.service.js

import axios from 'axios';

const baseURL = 'http://localhost:8080/api'; // Change this according to your setup

export default axios.create(
    baseURL,
);

创建另一个文件peopleData.service.js

import api from './api.service';
import handleError from './errorHandler.service'; // all the error handling code will be in this file, you can replace it with console.log statement for now.

export default 
    fetchPeopleData() 
        return api.get('/people')
            .catch((err) => handleError(err));
    ,

    // All other API calls related to your people's (users'/customers'/whatever is appropriate in your case) data should be added here.
    addPerson(data) 
        return api.post('/people', data)
            .catch((err) => handleError(err));
    ,

现在您可以将此服务导入您的组件并调用该函数。

<template>
... Template code
</template>

<script>
import peopleDataService from '@/services/peopleData.service';

export default 
    data() 
        return 
            rows: [],
        ;
    ,
    mounted() 
        peopleDataService.fetchPeopleData().then((res) => 
            if (res && res.status == 200) 
                this.rows = res.data;
            
        );
    ,

</script>

您尚未向我们提供有关您当前设置的任何想法。如果你使用 Vue-Router，最好在导航守卫中获取数据，尤其是当你的组件依赖数据时：Data Fetching

只需将代码从mounted() 转移到导航守卫中。 this 可能不可用，因此您必须使用next 回调来设置rows 数组，上面的链接中对此进行了说明。

【参考方案2】：

可以在方法中使用Axios，也可以挂载。

mounted()
    this.loading = true;
    axios
    .get(`$this.backendURL/api/v1/pages/layouts` , authHeader())
    .then(response => (this.layouts = response.data.data))
    .catch(handleAxiosError);


methods: 
      /**
        * Search the table data with search input
        */
      uncheckSelectAll()
        this.selectedAll = false
      ,
      onFiltered(filteredItems) 
          // Trigger pagination to update the number of buttons/pages due to filtering
          this.totalRows = filteredItems.length;
          this.currentPage = 1;
      ,
      handlePageChange(value) 
          this.currentPage = value;
          axios
          .get(`$this.backendURL/api/v1/pages?per_page=$this.perPage&page=$this.currentPage` , authHeader())
          .then(response => (this.pagesData = convert(response.data.data),
                             this.pagesDataLength = response.data.pagination.total));
        ,
      handlePerPageChange(value) 
        this.perPage = value;
        this.currentPage = 1;
        axios
        .get(`$this.backendURL/api/v1/pages?per_page=$this.perPage&page=$this.currentPage` , authHeader())
        .then(response => (this.pagesData = convert(response.data.data),
                           this.pagesDataLength = response.data.pagination.total));
      ,
      deletePage()
        this.loading = true
        this.$bvModal.hide("modal-delete-page");
        window.console.log(this.pageIdentity);
        if (!roleService.hasDeletePermission(this.pageIdentity))
          return;
        
        axios
        .delete(`$this.backendURL/api/v1/pages/$this.page.id` , authHeader())
        .then(response => (
          this.data = response.data.data.id,
          axios
          .get(`$this.backendURL/api/v1/pages?per_page=$this.perPage&page=$this.currentPage` , authHeader())
          .then(response => (this.pagesData = convert(response.data.data),
                             this.pagesDataLength = 

    response.data.pagination.total)),
              alertBox(`Page deleted succesfully!`, true)
              ))
            .catch(handleAxiosError)
            .finally(() => 
                this.loading =  false
            );
          

【讨论】：

只有挂载的方法就够了吗？之后 就像 tihs ?