Pass Attribute as a Component Parameter in Vue.js

Question

I'm creating a test Component in Vue.js. I want to pass a parameter to use in my template as follows:

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

In my html file:

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

But the property href is not binding to the attribute.

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

How can I do it properly in Vue.js?

Answer 1

Use the v-bind directive to set the prop:

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

or shortcut

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

Answer 2

您需要去掉href周围的括号，并使用v-bind指令指定您正在绑定数据属性：

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