VueJS - 將屬性從一個組件傳遞到模板中的另一個組件

我是Vue的新手，正在嘗試構建一組依賴其他較低級別組件的業務組件，並將屬性傳遞給它們。但是，通常的數據綁定v-bind：propName =「xxx」或：propName =「xxx」似乎都不在組件模板內工作，而所有文檔都將prop從頂級HTML頁面一個組件到另一個。VueJS - 將屬性從一個組件傳遞到模板中的另一個組件

例如，下面我有一個名爲「exchange-panel」的下級組件，它帶有「title」屬性。我希望我的高級組件使用該通用交換面板並傳入標題以供使用。我得到以下錯誤：

[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 
    } 
})

來源

2017-09-25 John P

需要引用Public order book

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

綁定屬性的值將被視爲作爲一個javascript表達式，Javascript字符串需要用某種引號括起來（單，雙，反引號）

更新fiddle。

正如@RoyJ指出的那樣，你也可以簡單地不綁定它並將它用作普通屬性。

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

來源

2017-09-25 22:28:45 Bert

或者在'title'之前刪除冒號，所以它是一個字面的道具而不是解釋的道具。 –

@RoyJ真。更新。 – Bert

我錯過了「屬性被視爲javascript表達式」 - 修復工作完美。謝謝 –

VueJS - 將屬性從一個組件傳遞到模板中的另一個組件

回答

相關問題