我正在学习Vue Atm,并且无法通过Vue Routes在子组件和父组件之间传递道具。我有一个Layout组件,它有一个包装DIV,看起来像这样:
<template>
<div class="container" v-bind:class="cssClass">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Layout',
props: ['cssClass']
}
</script>
,并且在我的基本App JS中定义了路由,如下所示。因此,我对初次装载的观点具有“容器动画”类,并且对整个世界都很好。
const router = new VueRouter({
routes: [
{ path: '/', component: Layout, props: { cssClass: 'container-animated' },
children: [
{ path: '', component: Homepage },
{ path: '/hello-world', component: HelloWorldPage, props: { cssClass: '' } }
]
},
]
});
但是,一旦我打到/ hello-world路线,我想将一个空的cssClass道具传递到Layout(当前嵌套在其中的HelloWorldPage)中-我将如何处理?道具甚至是实现目标的机制吗?
答案 0 :(得分:0)
让我解释一下vue的工作原理:
您有了父组件。 Layout.vue
<template>
<div id="app" class="container-fluid">
<router-view/>
</div>
</template>
<style>
.container-fluid {
background-color:blue; //as defined in the parent, everything inside #app will inherit this class
}
</style>
现在,您的vue路由器必须看起来像这样:
{
path: '/',
name: 'Layout',
component: Layout,
children: [
{ path: '', component: Create, name: 'Create' },
]
}
由于您已定义Layout.vue内部将继承.container-fluid内部的所有内容,因此组件Create将继承其父级(布局)中定义的类
希望这行得通。
此致
答案 1 :(得分:0)
我发现,这是否是解决我的问题的最佳解决方案,这是任何人的猜测。
当在Vue路由器上传递子道具时,父项似乎不会自动拾取子道具。因此,一旦动态地构建/注入了组件,它们每个都会调用我的自定义childinit事件,该事件会发回到父级(布局)中定义的路由器视图。我在父级中将局部变量设置为发出的子级的值,然后将类绑定到该变量。
user = User.find_by(number: number)
我的布局组件:
const router = new VueRouter({
routes: [
{
path: '/',
component: Layout,
children: [
{
path: '',
component: Homepage,
props: { cssClass: 'home' },
},
{
path: '/helloworld',
component: HelloWorldPage,
props: { cssClass: 'helloworld' }
}
]
}
]
});
我的主页组件:
<template>
<div class="container" v-bind:class="className">
<router-view v-on:childinit="onChildInit"></router-view>
</div>
</template>
<script>
export default {
name: 'Layout',
props: ['cssClass'],
data() {
return {
className : ''
}
},
methods: {
onChildInit( value ){
this.className = value;
}
}
}
</script>
HelloWorld组件也将发出,有可能不需要复制创建的方法。可能会尝试看看是否可以扩展将始终在两个组件的init上发出的基本组件。
答案 2 :(得分:0)
我知道这很老了,但是您不必担心在组件中创建一个发出您的值的方法。这是我的解决方案。
您的布局:
<template>
<div class="container" v-bind:class="className">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Layout',
props: ['cssClass'],
data() {
return {
className : ''
}
},
// set class initially
created () {
this.setClassName(this.$route)
},
// and when route changes
watch: {
$route: function (val) {
this.setClassName(val)
}
},
methods: {
setClassName( Route ){
// each matched route is checked for cssClass from top to bottom, so you can override
Route.matched.forEach((route) => {
if (route.props.default && route.props.default instanceof Object && 'cssClass' in route.props.default) {
this.className = route.props.default.cssClass
}
})
}
}
}
</script>
这样,所有内容都保留在Layout组件上。这也不是理想的解决方案。我可以想象使用router.afterEach()
并将值设置为Vuex存储。