在Vue.js中传递属性作为组件参数

Question

我在Vue.js中创建测试组件。我想传递一个参数在我的模板中使用如下：

Vue.component('test', { 
    props: ['href'], 
    template: '<li><a href="{{href}}"><slot></slot></a></li>' 
}); 

在我的html文件：

<test href="/">Tvest</test> 

但物业href不具约束力的属性。

<li><a href="{{href}}">Tvest</a></li> 

我该如何在Vue.js中正确地做到这一点？

Answer 1

您需要get rid of the brackets周围href并指定通过使用绑定数据属性v-bind directive：

<li><a v-bind:href="href"><slot></slot></a></li> 

Answer 2

使用v-bind directive设置道具：

<a v-bind:href="href"><slot></slot></a>

或快捷

<a :href="href"><slot></slot></a>