属性をVue.jsのコンポーネントパラメータとして渡します

Question

Vue.jsにテストコンポーネントを作成しています私のHTMLファイルに

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

：私は次のように私のテンプレートで使用するパラメータを渡したい

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

しかし、プロパティhrefは、属性への結合ではありません。

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

Vue.jsで正しく行うにはどうすればよいですか？

Answer 1

、あなたが使用してデータプロパティをバインドするように指定v-bind directive：

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

Answer 2

小道具を設定するv-bind directiveを使用して：あなたはhref周りget rid of the bracketsに必要

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

またはショートカット

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