在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>