访问 <script> 标签中的全局计算属性

Question

Vuepress 定义了一些可以在模板中使用的全局属性，比如 $page 或 $site.

https://github.com/vuejs/vuepress/blob/master/packages/docs/docs/guide/global-computed.md

我可以在 <template> 节点中使用它们，但尝试在 <script> 中使用它们会引发错误。

<template>
  <div class="page">
    <div class="content">
      <div>{{ $page.frontmatter.description }} Works fine</div>
      <div>{{ $frontmatter.description }} Does not work despite what's in docs</div>
      <div>{{ description }} Doesn't work</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      description: this.$page.frontmatter.description, //not defined
      description2: $page.frontmatter.description, //nor this
    };
  },
};
</script>

Answer 1

您的问题不在于在 data().

中使用 Vuepress Global Computed Properties inside <script> tag, it's actually about using Vuejs Computed Properties
如果你像下面的代码片段那样简单地创建一个 Vue 组件，你会发现变量 testMessage 也没有定义。

<template> <div>{{ testMessage }}</div> </template> <script> export default { data() { return { testMessage: this.test } }, computed: { test: function() { return 'This is a test'; } } } </script>

我不知道具体原因，但我相信这与 Vue 实例的生命周期有关。所以我建议您只需访问计算属性或方法中的全局计算属性：

<template> <div>{{ description }}</div> </template> <script> export default { computed: { description : function() { return this.$page.frontmatter.description; } } } </script>

访问 <script> 标签中的全局计算属性

Access global computed properties in <script> tag

vue.js

vuepress