VueJS - テンプレート内のあるコンポーネントから別のコンポーネントへプロパティを渡す

Question

私はVueが新しく、他の下位コンポーネントに依存する一連のビジネスコンポーネントを構築し、それらにプロパティを渡そうとしています。 propName = "xxx"または：propName = "xxx"のような通常のデータバインディングv-bindはコンポーネントテンプレートの内部では動作しませんが、すべてのドキュメントでは、あるコンポーネントから別のコンポーネントへ

たとえば、以下では、 "title"プロパティを取る "exchange-panel"という低レベルコンポーネントがあります。私は、上位レベルのコンポーネントが汎用交換パネルを使用し、使用するタイトルを渡すようにします。 I次のエラーを取得する：ここで

[Vue warn]: Error compiling template: 

     <exchange-panel :title="The Panel Title"> 
      <h1>test</h1> 
     </exchange-panel>  


- invalid expression: :title="The Panel Title" 


found in 

---> <OrderbookDetail> 

は、サンプル・コードである（またhttps://jsfiddle.net/ns1km8fh/

Vue.component("orderbook-detail", { 
    template:` 
     <exchange-panel :title="Public order book"> 
      <h1>test</h1> 
     </exchange-panel>  
    ` 
}); 
Vue.component("exchange-panel", { 
    template:` 
     <div class="panel panel-default"> 
      <div class="panel-heading">Title: {{ title }}</div> 
      <div class="panel-body"> 
       <slot></slot> 
      </div> 
     </div>`, 
    props: ["title"] 
}) 

new Vue({ 
    el: "#exchange-container", 
    created: function() { 
     window.Vue = this 
    } 
}) 

Answer 1

であなたはPublic order bookを引用する必要が

<exchange-panel :title="'Public order book'"> 

バインドされた属性の値が処理されますJavascriptの文字列は、何らかの種類の引用符で囲む必要があります（シングル、ダブル、バッククック）。

fiddleを更新しました。

@RoyJが指摘しているように、単にバインドして通常の属性として使用することもできます。

<exchange-panel title="Public order book">