Question

我是Vue的新手，我正在尝试构建一组依赖于其他低级组件的业务组件，并将属性传递给它们。通常的数据绑定v-bind：propName =“xxx”或：propName =“xxx”似乎都不在组件模板内部工作，并且所有文档都处理从顶级HTML页面而不是从顶层HTML页面传递的prop一个组件到另一个组件。

例如，在下面我有一个名为“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
    }
})

Answer 1

您需要引用Public order book。

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

绑定属性的值被视为javascript表达式。 Javascript字符串需要用引号括起来（单引号，双引号，反引号）。

更新了fiddle。

正如@RoyJ所指出的那样，你也可以简单地将其绑定并将其用作普通属性。

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

VueJS - 将属性从一个组件传递到模板中的另一个组件

1 个答案: