402 vue组件传参

原始方式使用 $route获取

// 入口
<router-link to="/header/3">123</router-link>

// 规则
routes： [
    {
        path： '/header/：id'，
        component： header，
    }
]

// 获取参数
const header = {
    template： `<p>header  {{ $route.params.id }}  </p>`
}

布尔模式

// 入口
<router-link to="/header/3">123</router-link>

// 规则
routes： [
    {
        path： '/header/：id'，
        component： header，
        // 如果 props 被设置为 true，route.params 将会被设置为组件属性
        props： true
    }
]

// 获取参数
const header = {
    // 参数 id 当成参数
    props： ['id']，
    template： `<p>header   {{ id }} </p>`
}

对象模式

// 入口
 <router-link to="/header">123</router-link>

// 规则
 routes： [
     {
         path： '/header'，
         component： header，
         props： { foo： '0000' }
     }
 ]
// 组件
 const header = {
        props： ['foo']，
        template： `<p>header   {{ foo }} </p>`
 }

函数模式

// 同对象模式一样
// 区别是props值不一样
 props： to => {
     return { foo： '0000' }
 }

注意：对象模式和函数模式参数在props里，所以声明式导航那里就不要传参了

11-组件传参.html

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

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

<body>
    <!-- 
       方式1  to='/one/4'  path='/one/:id?'  组件:$route.params.id 
                                      事件 : this.$route.params.id 

       方式2 : 布尔模式  路由规则里 props:true     
              将参数id 作为组件的属性存在  
              -  props:true
              - 组件内 : props:['id']
              - 使用: {{ id }}

       方式3 :  对象模式      
              - props : { aaa : 'bbb' }
              - props: ['aaa']
              - {{ aaa }}

        方式4 :  函数模式    
               - props : to => { return { aaa : 'ccc' }  }
               - props:['aaa']
               - {{ aaa }} 
    -->

    <div id="app">
        <!-- 1. 入口 -->
        <router-link to="/one">one</router-link>

        <!-- 4. 出口 -->
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 3. 组件
        const One = {
            props: ['id', 'aaa'],
            template: `<div>one组件 {{ aaa }}</div>`
        }

        //  实例化
        const router = new VueRouter({
            // 2. 规则

            routes: [
                // props : true  将id参数作为组件的属性存在
                // { path: '/one/:id', component: One, props: true }

                // 将aaa 作为 组件的属性存在
                // { path: '/one', component: One, props: { aaa: 'bbb' } }

                // 函数
                {
                    path: '/one',
                    component: One,
                    props: to => {
                        return {
                            aaa: 'ccc'
                        }
                    }
                }
            ]
        })

        const vm = new Vue({
            router,
            el: '//app',
            data: {}
        })
    </script>
</body>

</html>

猜你喜欢