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

Posted 2023-02-23

【中文标题】VueJS - 在模板中将属性从一个组件传递到另一个组件

【英文标题】：VueJS - pass properties from one component to another in the template

【发布时间】：2018-03-07 00:11:14

【问题描述】：

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

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

【参考方案1】：

您需要引用Public order book。

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

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

更新fiddle。

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

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

【讨论】：

或者去掉title之前的冒号，所以它是一个字面的prop，而不是一个解释的。

@RoyJ 真的。已更新。

我错过了“属性被视为 javascript 表达式” - 该修复工作完美。谢谢