vue学习十五(props解耦、props 布尔-对象-函数三种模式)

最新推荐文章于 2025-07-05 16:37:21 发布

易辰_

最新推荐文章于 2025-07-05 16:37:21 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React\Vue Vue

本文链接：https://blog.csdn.net/u013210620/article/details/82964157

React\Vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

本文深入探讨了Vue中路由与Props的多种使用模式，包括路由的耦合问题、Props的布尔模式、对象模式及函数模式，展示了如何通过不同方式使组件更加灵活且易于管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

$route耦合

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

</head>

<body>

    <div id="box">
        <router-link to="/one/1">One</router-link>
        <router-view></router-view>
    </div>
    <!--定义模版-->
    <template id="Foo">
        <div>
            第一个router {{$route.params.id}}
            
        </div>
    </template>
    <script>
        //1、定义 (路由) 模版组件
        //2、定义路由
        var routes = [
            {
                path: "/one/:id",
                component: { template: "#Foo" },
                props: true 
            }
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')
    </script>


</body>

</html>

浏览器输入file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1
输出如下：

One
第一个router 1

props解耦

props 布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

<body>
    <div id="box">
        <router-link to="/one/1">One</router-link>
        <router-view></router-view>
    </div>
    <!--定义模版-->
    <template id="Foo">
        <div>
            {{id}}    
        </div>
    </template>
    <script>
        const Foo = {
            props: ['id'],
            template: "#Foo",
        }
        //1、定义 (路由) 模版组件
        //2、定义路由
        var routes = [
            {
                path: "/one/:id",
                component: Foo,
                props: true 
            }
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')
    </script>


</body>

测试结果如下：
file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1
浏览器输出如下：

One
1

props对象模式


<body>
    <div id="box">
        <router-link to="/one/1">One</router-link>
        <router-view></router-view>
    </div>
    <!--定义模版-->
    <template id="Foo">
        <div>
            {{userName}}
        </div>
    </template>
    <script>
        const Foo = {
            props: ['userName'],
            template: "#Foo",
        }
        //1、定义 (路由) 模版组件
        //2、定义路由
        var routes = [
            {
                path: "/one/:id",
                component: Foo,
                props:{
                    userName: 'mapbar_front'
                }
            }
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')
    </script>
</body>

浏览器效果如下：
file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1
浏览器渲染如下：

One
mapbar_front

props函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

<body>
    <div id="box">
        <router-link to="/one/1">One</router-link>
        <router-view></router-view>
    </div>
    <!--定义模版-->
    <template id="Foo">
        <div>
            {{userName}}
            {{id}}
        </div>
    </template>
    <script>
        const Foo = {
            props: ['userName',"id"],
            template: "#Foo",
        }
        //1、定义 (路由) 模版组件
        //2、定义路由
        var routes = [
            {
                path: "/one/:id",
                component: Foo,
                // props:{
                //     userName: 'mapbar_front'
                // },
                props: (route) => (
                     { 
                        userName: "mapbar_front",
                        id: route.params.id
                     }
                )
            }
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')
    </script>
</body>

浏览器输入
file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1
效果输出如下：