通过路由器将不同的数据作为道具传递给子组件的Vue.js
通过路由器将不同的数据作为道具传递给子组件的Vue.js
提问于 2021-03-12 02:39:48
我的vue应用程序中有一个嵌套的路由器。
我的router/index.js
{
path: "/parent",
name: "Parent",
component: () =>
import(/* webpackChunkName: "parent" */ "../views/Parent.vue"),
children: [{
path: ':id',
name: 'ChildOne',
components: {
nestedview: () =>
import(/* webpackChunkName: "child-one" */ "../views/ChildOne.vue"),
}
},
{
path: "child-two",
name: "ChildTwo",
components: {
nestedview: () =>
import(/* webpackChunkName: "child-two" */ "../views/ChildTwo.vue"),
}
}]
},父组件模板(我使用pug)：
router-view(
name="nestedview",
:functionOne="functionOne",
:functionTwo="functionTwo",
:functionThree="functionThree",
)问题是，我只需要在ChildOne组件中使用functionOne、functionTwo和functionThree，在那里我将它们作为道具传递。在ChildTwo组件中，我只需要作为道具传递的functionOne，但在浏览器的源代码中，我可以看到另外两个以某种方式作为组件根元素的参数functionTwo="function () { [native code] }"和functionThree="function () { [native code] }"传递。
问题是，如果这些组件在技术上不是父组件的子组件，而是通过嵌套的路由器呈现的，那么有没有一种方法可以将不同的数据作为道具从父组件传递给子组件？
回答 1
Stack Overflow用户
发布于 2021-03-12 09:59:07
如果找不到属性，v-bind会自动绑定属性。
一个快速的解决方法是使用v-bind的.prop modifier，这样绑定只会尝试设置存在的组件属性(否则，什么都不会绑定)：
router-view(
name="nestedview",
:functionOne.prop="functionOne",
:functionTwo.prop="functionTwo",
:functionThree.prop="functionThree",
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66588550
复制相关文章
相似问题
腾讯云开发者
