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

$route耦合

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

    
    

    
    





    

        One
        
    
    
    
    

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

One
第一个router 1

props解耦

props 布尔模式

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

    

        One
        
    
    
    
    

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

One
1

props对象模式

    

        One
        
    
    
    
    

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

One
mapbar_front

props函数模式

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

    

        One
        
    
    
    
    

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

One
mapbar_front 1