时间戳

首页 > 解决方案 > vue单文件组件之间如何传递数据

vue.js - vue单文件组件之间如何传递数据

问题描述

我在 vue 中有（我的第一个）应用程序，它从 api 获取数据并呈现一些选择元素。我想将每个框分隔到另一个文件（一个文件用于从 api 获取数据，第二个用于渲染选择，第三个用于渲染列表）。我如何从

我试图从 api 实例获取数据：

  export default {
      props: {
          filters: apiIntance.$data.kpis.filters,

此刻我有这样的事情：

<!-- src/components/Filters.vue -->
<template>
  <div class="filters">
      <label v-bind:key="filter.id" v-for="filter in filters">
          <select class="js-selectbox">
              <option v-bind:value="item.id" v-bind:key="item.id" v-for="item in filter.items">{{item.name}}</option>
          </select>
      </label>
  </div>
</template>
<script lang="ts">
    import Vue from 'vue';

    import Api from './ApiTest.vue';

    export default {
        props: {
            filters: //Get Data from ApiTest.vue
        },
    };
</script>

<!-- src/components/ApiTest.vue -->
export default Vue.extend({
data(): DataObject {
    return {
        kpis: {
            ...
        },
    };
  },

您是否有一些提示如何在一个文件中获取数据并将其传播到其他文件？

标签： vue.js

解决方案

有很多方法，仅举几例

  1. one file for get data from api不需要是 vue 实例。你可能想添加更多的钩子。
// ApiService.ts
export const ApiService = { getData: () => {/**/} }

// src/components/Filters.vue
...
<script lang="ts">
  import Vue from 'vue';
  import {ApiService} from '@/.../ApiService'

  export default {
    data: () => ({
      filters: []
    }),
    created() {
      ApiService.getData().then(data => this.filters = data)
    }
  };
</script>
  1. 您当然可以创建一个 Vue 实例来提供数据，使其具有反应性和组件独立于数据逻辑。例如：
// ApiService.ts
const ApiService = new Vue({
  data: () => ({
    filters: []
  }),
  created() {
    request().then(data => this.filters = data)
  }
})

// src/components/Filters.vue
...
<script lang="ts">
  import Vue from 'vue';
  import {ApiService} from '@/.../ApiService'

  export default {
    computed: {
        filters() {
          return ApiService.filters
        }
    }

  };
</script>

推荐阅读