如何在Vue中将href值传递给模板

Question

这是 HTML。

<navlink v-bind:href="#about">About</navlink>

而 main.js 代码是

Vue.component('navlink', {
    template: '<li class="item"><a><slot></slot></a></li>'
});

但我收到错误

[Vue 警告]：无法编译模板：-无效表达式：v-bind:href="#about"

如何解决这个问题？

Answer 1

我意识到您已经解决了这个问题，但v-bind希望您指向父类中的一个对象，data并且您正在尝试使用字符串文字，因此 Vue 会抛出一个错误，因为它找不到具有该键的对象。

你也可能更喜欢将hrefprop 作为 prop传递给你的组件，所以你最终得到：

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

然后你可以这样做：

<navlink href="#about">About</navlink>

这是 JSFiddle：https ://jsfiddle.net/ov94tg5z/