Vue JS - コンポーネント内のルート計算済みプロパティにアクセスする

Question

ルートVueインスタンスから計算されたプロパティにアクセスし、コンポーネント内でアクセスしようとしています。コンポーネントテンプレートの外に出力される<p class="currency">要素は正しく{{currency}}を出力しますが、コンポーネントの{{currency}}にアクセスしようとすると何も出力されません。私は小道具として通貨を設定しようとしましたが、これは何の違いもないようです。 {{vm.currency}}のようなコンポーネント内からルートVueインスタンスにアクセスする方法が必要であるに違いないと確信していますが、やはりこれを無駄にしようとしました。

ここに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 --> 

ここにJSがあります。変数countryCodeはアプリ内の別の場所で定義されていますが、{{currency}}はコンポーネントの外で動作していると言われていますので、これは問題ではありません。

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 "$"; 
     } 
    } 
    } 
}); 

Answer 1

同じ問題が発生した場合は、プロパティの前に$ rootを定義するだけで済みます。だからではなく、本の私の例...

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

で...それは...これをする必要があります

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

ドキュメントは、コンポーネントのParent Chainセクションの下で、このことについて話しますVueJSが。