Vue JS - 访问组件内的根计算属性 [英] Vue JS - Access root computed property inside a component

问题描述

我试图从根 Vue 实例访问计算属性并在组件内访问它.在组件模板之外输出的 <p class="currency"> 元素正确输出 {{currency }}，但是当试图访问组件内部的 {{currency }} 时什么也没有是输出.我曾尝试将货币设置为道具，但这似乎没有任何区别.我确定必须有一种方法可以从组件内部访问根 Vue 实例，例如 {{ vm.currency }} 但我再次尝试过，但无济于事.

这是 HTML.

<ul class="计划"><plan-component : name="Basic" ></plan-component><plan-component : name="Rec" ></plan-component><plan-component : name="Team" ></plan-component><plan-component : name="Club" ></plan-component><模板 id="计划组件"><li><h2 class="plan-name">{{ name }}</h2><h3 class="plan-cost">{{货币}}</h3></模板><p class="currency">{{currency }}</p></div><!-- end #app -->

这是JS.变量 countryCode 在我的应用程序中的其他地方定义，但就像我说的 {{currency }} 在组件之外工作，所以这不是问题.

Vue.component('计划组件', {模板:'#计划组件'，道具: {名称:字符串，}});var vm = new Vue({el: '#app',计算:{货币:函数(){if(countryCode === 'GB') {返回£"；} 别的 {返回$"；}}}});

解决方案

对于任何有同样问题的人，您只需在属性前定义 $root 即可.所以在我的例子中而不是这个......

<h3 class="plan-cost">{{货币}}</h3>

...必须是这个...

<h3 class="plan-cost">{{ $root.currency }}</h3>

VueJS 文档在组件的 Parent Chain 部分讨论了这一点.

I'm attempting to access a computed property from the root Vue instance and access it inside a component. The <p class="currency"> element which is output outside of the component template outputs {{ currency }} correctly, but when trying to access {{ currency }} inside of the component nothing is output. I have tried setting currency as a prop but this doesn't appear to make any difference. I'm sure there must be a way to access the root Vue instance from within the component, something like {{ vm.currency }} but again I have tried this to no avail.

Here is the HTML.

<div id="app">

  <ul class="plans">

    <plan-component : name="Basic" ></plan-component>

    <plan-component : name="Rec" ></plan-component>

    <plan-component : name="Team" ></plan-component>

    <plan-component : name="Club" ></plan-component>
  </ul>

  <template id="plan-component">
    <li>
      <h2 class="plan-name">{{ name }}</h2>
      <h3 class="plan-cost">{{ currency }}</h3>
    </li>
  </template>

  <p class="currency">{{ currency }}</p>

</div><!-- end #app -->

Here is the JS. The variable countryCode is defined elsewhere in my app, but like I said {{ currency }} is working outside of the component so this isn't an issue.

Vue.component('plan-component', {
  template: '#plan-component',

  props: {
    name: String,
  }
});

var vm = new Vue({
  el: '#app',

  computed: {
    currency: function() {
      if(countryCode === 'GB') {
        return "£";
      } else {
        return "$";
      }
    }
  }
});

解决方案

For anyone with the same issue, you simply need to define $root before the property. So in my example instead of this...

<h3 class="plan-cost">{{ currency }}</h3>

...it needs to be this...

<h3 class="plan-cost">{{ $root.currency }}</h3>

The VueJS docs do talk about this under the Parent Chain section of Components.

这篇关于Vue JS - 访问组件内的根计算属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！