Vue 爬坑之旅--父组件传入图片路径和路由给子组件

在实际开发中，经常会碰到一种情形：

*父组件中有好几个列表形式的子组件，要把这些子组件正确的渲染出来，就必须从父组件中传入数据给子组件，让子组件通过 v-for 去渲染。
有的时候，这些数据里面可能会包含有静态的图片路径，还可能会有路由（最典型的例子就是APP首页里面的导航图标，需要显示出一个图片，点击图片需要跳转到另外的页面）*
比如下面这种
这里写图片描述

现在的需求是这几个导航图标都是本地的静态图片而不是从服务器获取的 Url，（当然直接从服务器获取图片 Url 也可以，这里不讨论这种情况，毕竟需要后端的配合，，，）。然后每个图标点击之后需要跳转到一个新的页面。
这样的一个需求，我考虑下来最简单的做法应该是将这四个导航图标作为一个组件，从父组件中传入一个数组去渲染出这四个图标。

父组件提供数据

思路有了，那么就要准备数据。很显然，数据最少需要包含三个字段：图片路径、路由、名称。
名称好说，那么图片路径和路由要怎么写呢？（写法不对，会导致Vue报错，页面渲染不出来），下面就直接放出具体写法。

            navs: [
                    {
                        "name": "一键询价",
                        "imgPath": "../../../static/logo.png",
                        "url":"/mine"
                    },
                    {
                        "name": "我的自选",
                        "imgPath": require("../../assets/logo.png"),
                        "url":"/mine"
                    },
                    {
                        "name": "充值中心",
                        "imgPath": require("../../assets/logo.png"),
                        "url":"/mine"
                    },
                    {
                        "name": "新手引导",
                        "imgPath": require("../../assets/logo.png"),
                        "url":"/mine"
                    },
                ]

解释下上面的代码，首先图片路径 imgPath 有二种写法：
一，如果图片是在 assets 文件夹下面的话，需要在路径前面加上 require 函数才行，否则 webpack 会识别不了路径报错

"imgPath": require("../../assets/logo.png"),

二，还可以把图片放到 static 文件夹下面，这样的话就不需要 require ，可以像原来传统的方式那样写,

"imgPath": "../../../static/logo.png",

然后就是路由，路由的话可以直接写路由定义时候的 path，但是有一点要注意的就是子路由的写法，在定义子路由的时候 path 里面是没有斜杠的

{
      path: '/mine',
      name: 'Mine',
      component: Mine,
        children:[
            {
                path:'login',
                component:Find
            }
        ]
    }

但是在用子路由的时候需要加上斜杠，跟浏览器的地址里面显示的一样

"url":"/mine/login"

子组件获取数据

上面说了父组件如何提供数据，那么下面就要说下子组件怎么去获取这些数据并加载了。

父组件将数据传给子组件
在父组件中，将要传出的数据绑定到子组件的一个自定义属性上

<HomeNavs :navs = "navs"></HomeNavs>

子组件中获取数据
在子组件中通过 props 来接收数据，在 props 中指定接收数据的名字和类型，名字要跟父组件中绑定的自定义属性的名字相同。

export default {
        name: "home-navs",
        props: {
            navs: {
                type: Array,
                required: true
            }
        },
    }

渲染列表
拿到数据之后就是渲染列表了，因为导航点击的时候要跳转，所以需要用到 router-link ，需要注意的就是 router-link 里面 to 属性和 img 标签里面的 src 属性都要使用 v-bind 指令才能获取到数据，同时 to 里面的写法也有点特殊，这点要特别注意，

        <div class = "f1 item" v-for = "item in navs">
            <router-link :to="{path:item.url}">
                <img :src = "item.imgPath" alt = "">
                <p>{{item.name}}</p>
            </router-link>
        </div>

另外，关于父组件给子组件传值的时候需要注意的地方还可以看下这篇博客， https://www.cnblogs.com/padding1015/p/7878710.html 其中有说到传的值分为普通类型和引用类型，普通类型可以在子组件中随意修改，但引用类型则不行，在某个子组件内修改引用类型的值会对其他的子组件产生影响，这点需要特别注意。