Question

首先，我是VueJS的初学者，因此我可能会向您介绍一些无意义的内容。 :-)我阅读了所有初学者的文档，但在这种情况下我仍然受阻。

我有2个由功能组件管理的模板组件：

<template>
  <h2>PageSpeed performance score: {{ results.score }}.</h2>
</template>

第二个，使用第一个（第一个需要在其他地方使用以仅显示分数：

<template>
  <div>
    <template v-if="results">
      <hosting-performance-score :results="results"/>

      <div
        v-for="(result, rule) in results.rules"
        v-if="result.ruleImpact > 0"
        :key="rule"
        class="panel panel-default"
      >
        <div class="panel-heading">{{ result.localizedRuleName }}</div>
        <div class="panel-body">
          <p>
            {{ result.summary.format }}

            <b>{{ result.ruleImpact }}</b>
          </p>
        </div>
      </div>
    </template>
    <i
      v-else
      class="fa fa-spin fa-spinner"
    />
  </div>
</template>

<script>
  import HostingPerformanceScore from './HostingPerformanceScore';

  export default {
    components: {
      HostingPerformanceScore,
    },
  };
</script>

然后是具有AJAX逻辑的功能代码：

<script>
  import axios from 'axios';
  import axiosRetry from 'axios-retry';
  import HostingPerformanceScore from './HostingPerformanceScore';
  import HostingPerformancePage from './HostingPerformancePage';

  axiosRetry(axios);

  export default {
    functional: true,
    props: {
      scoreOnly: {
        default: false,
        type: Boolean,
      },
      slug: {
        required: true,
        type: String,
      },
    },
    data: () => ({
      results: null,
    }),
    created() {
      axios.get(Routing.generate('hosting_performance_pagespeed', {
        slug: this.slug,
      })).then((response) => {
        this.results = {
          rules: Object.entries(response.data.formattedResults.ruleResults).map((entry) => {
            const result = entry[1];

            result.ruleName = entry[0];

            return result;
          }).sort((result1, result2) => result1.ruleImpact < result2.ruleImpact),
          score: response.data.ruleGroups.SPEED.score,
        };
      });
    },
    render: (createElement, context) => {
      return createElement(
        context.props.scoreOnly ? HostingPerformanceScore : HostingPerformancePage,
        context.data,
        context.children
      );
    },
  };
</script>

问题是：我无法访问结果，也不知道如何正确传递结果：Property or method "results" is not defined on the instance but referenced during render.

也许功能组件不是为此设计的，但是我不知道如何实现它。你会怎么做？

谢谢！：-）

Answer 1

关于哪些组件可以起作用，哪些没有起作用，您似乎对此有些退缩。

由于您的from django.views.generic import TemplateView from django.shortcuts import render, redirect from django.contrib.auth.models import User from home.forms import HomeForm from django.contrib.auth.decorators import login_required from home.models import Post class HomeView(TemplateView): template_name = 'home/home.html' def get(self, request): form = HomeForm() posts = Post.objects.all().order_by('-created') users = User.objects.exclude(id=request.user.id).exclude(is_superuser=True) args = {'form': form, 'posts': posts, 'users': users} return render(request, self.template_name, args)和<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Player Name</th> <th scope="col">Position</th> <th scope="col">Grade</th> </tr> </thead> <tbody> <tr> <th scope="row">{{ user.userprofile.jersey_number }}</th> <td>{{ user.get_full_name }}</td> <td>{{ user.userprofile.position }}</td> <td>{{ user.userprofile.grade }}</td> </tr> </tbody>组件实际上仅是渲染数据，因此它们可以通过仅渲染它们接受的道具而成为功能组件。

您的其他组件必须保持状态，因此它不能成为功能组件。

我整理了一个示例，说明它可能如何工作。

HostingPerformanceScore

HostingPerformanceScore

HostingPerformancePage

HostingPerformancePage

PerformanceResults.vue

<template functional>
  <h2 v-if="props.results">
    PageSpeed performance score: {{ props.results.score }}.
  </h2>
</template>

这是working example。

如何使用第二个组件在第一个组件之间共享ajax结果？

1 个答案: