V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
movq
V2EX  ›  Vue.js

vue 里面子组件直接放到父组件的 template 里面,子组件路由是怎么传参的?

  •  
  •   movq · 2021-11-05 20:14:42 +08:00 · 1852 次点击
    这是一个创建于 873 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我有一个父组件 A ,父组件里面的子组件 B 直接显示在父组件的 template 里面上:

    A.vue:

    <template>
    ...
    ...
    	<b/>
    </template>
    
    import B from B.vue
    
    setup(){
    	components: {B}
    }
    

    在路由里面,是这么写的:

            {
                path: "/A_path",
                name: "A",
                components: {
                    header: Header,
                    main: A,
                },
                children: [{
                    path: "B_path/:id",
                    component: B,
                },],
            },
    

    可以看到,在 B 的路由里面,有一个参数 id

    但问题是,我的 B 直接在 A 组件下面显示了,那么这个 id 是怎样才能传递进去呢?

    13 条回复    2021-11-08 08:54:21 +08:00
    movq
        2
    movq  
    OP
       2021-11-05 20:24:04 +08:00
    @learnshare

    this.$route.params.id 是在 B 组件里面获取 B 组件接受到的 id 这个参数。

    我的问题是,如果 B 组件直接在 A 组件里面显示,这种显示方法并没有使用路由跳转,那么 B 组件里面的 this.$route.params.id 是怎么传进去的呢?还是说这种情况没有这个参数?
    learnshare
        3
    learnshare  
       2021-11-05 20:28:02 +08:00
    @movq

    v3
    >通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由:

    v4
    >通过调用 app.use(router),我们可以在任意组件中以 this.$router 的形式访问它,并且以 this.$route 的形式访问当前路由:

    this.$route 代表的是当前路由( URL 路径),与哪个组件没有关系。只要组件已经渲染(显示)在页面中,就可以访问它
    learnshare
        4
    learnshare  
       2021-11-05 20:31:12 +08:00
    gouflv
        5
    gouflv  
       2021-11-05 22:44:42 +08:00 via iPhone   ❤️ 1
    父子组件和路由没有半毛钱关系
    gouflv
        6
    gouflv  
       2021-11-05 22:47:42 +08:00 via iPhone
    lin07hui
        7
    lin07hui  
       2021-11-05 23:25:14 +08:00
    var app = new Vue({...})
    app 里全部组件的 this.$router 都是同一个对象
    neutrino
        8
    neutrino  
       2021-11-06 01:15:50 +08:00 via Android
    穿不进去的,你的 URL 里没有 B 只有 A ,也就没有 id
    gadfly3173
        9
    gadfly3173  
       2021-11-06 03:15:50 +08:00
    https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F

    声明 param 为 prop ,这样你就可以把它当成 prop 传进去了
    IvanLi127
        10
    IvanLi127  
       2021-11-06 09:52:12 +08:00 via Android
    给 <b /> 外面包个 <route-view> </route-view> ?
    dfkjgklfdjg
        11
    dfkjgklfdjg  
       2021-11-06 09:58:34 +08:00
    组件 A:
    <template>

    </template>
    dfkjgklfdjg
        12
    dfkjgklfdjg  
       2021-11-06 10:01:25 +08:00
    // 组件 A:
    <template>
    // 前后内容
    <router-view></router-view>
    </template>

    // router.js
    {
    path: "/A_path",
    name: "A",
    children: [
    {
    path: "B_path/:id",
    component: B,
    },
    ],
    },

    其实就是组件套路由容器,让 router-view 做显示,就是正常的路由思路。
    tuutoo
        13
    tuutoo  
       2021-11-08 08:54:21 +08:00 via Android
    直接在 B 组件里添加一个属性 prop, 从父组件传过去吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3251 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:12 · PVG 20:12 · LAX 05:12 · JFK 08:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.