Vue Props 值未在简单测试中通过 [英] Vue Props values not passed in simple test
本文介绍了Vue Props 值未在简单测试中通过的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 VUE 的新手,我正在测试一个简单的 vue-router,但道具在这个测试中不起作用.
解决方案
需要在routes属性中添加props属性
{ path: '/foo', name:'foo', component: Foo , props: true}
你还需要在 router-link 中传递 prop 值
I'm new using VUE and I was testing a simple vue-router but props are not working in this test.
<div id="app">Menu:
<router-link to="/">Home</router-link> |
<router-link to="/post">Post</router-link> |
<router-link to="/foo">Foo link comment</router-link>
<router-view></router-view>
</div>
const Home = { template: '<div class="page">Welcome to my Home <router-link :to="{name:\'foo\'}">this link</router-link></div>' }
const Foo = {
props:['comment', 'msg'],
template: '<div class="page">{{msg}} Here the comment:<hr><div v-html="comment"></div><hr>Go back to <router-link :to="{name:\'home\'}">home</router-link></div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', name:'home',component: Home },
{ path: '/foo', name:'foo', component: Foo }],
})
new Vue({
router,
el: '#app',
data: {
msg: 'Hello World',
comment : '<div class="comment">This is a <strong>bold</strong> link</div>'
}
})
And how to pass the router link in prop HTML code?
解决方案
You need to add props property in routes attribute
{ path: '/foo', name:'foo', component: Foo , props: true}
Also you need to pass prop value in router-link
<router-link :to="{ name: 'foo',
params: { comment: comment,msg: msg }}">Foo link comment</router-link>
这篇关于Vue Props 值未在简单测试中通过的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文