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 - 将属性从一个组件传递到模板中的另一个组件

回答

相关问题