vue.js初学之组件props

上一篇讲述了公司——办公室——员工的神奇组合，那么现在就要开始来说说，他们中间是怎么发布任务的。vue里面就提供了一个好东西，叫props，这一篇里面，我会把在props里面踩的坑都写出来。说起props，其实就是父组件和子组件传递信息的工具，用我的话讲就是，办公室的老大给员工说，“我要给你什么任务一样”

prop用法

上面就是一个具体的用法，但这种传值的方式，只是传入一个字符串。同样的我们也可以用v-bind:message='hello'来传字符串，当然具体的prop怎么传值，可以看官网prop ，推荐用v-bind来对prop传值，动态静态都能玩。

prop的单向数据流

来说说这个强大的坑了，在这之前，我们先来说几个在使用prop进行数据传输的时候，要注意的点：

父子组件数据传输是单向的，只能由父组件传给子组件，子组件无法直接传给父组件（很好理解，办公室的老大可以给你下命令，你敢给你的老大下命令吗，要是可以，那不就乱套了，这也是vue为了不混乱而设定的）
子组件无法更改props中的值（老板下的命令不能改啊）
父组件的传值方式为初始化传值，即第一次传值后，接下来父组件的值发生改变不会再同步到子组件（老板给你下了一次任务，难得还会跟你说这个任务要怎么做吗？）

这三个点我就不一一演示了，那么我们就来写一个最简单的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Company</title>
    <style>
        li{
            list-style: none;
        }

        .is-finished{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id="app-1">
    <todo-item :list="task"></todo-item>
</div>
<template id="task-template">
    <ul>
        <li>{{list}}</li>
    </ul>
</template>
<script src="../script/vue.js"></script>
<script>
    Vue.component('todo-item', {
        template: '#task-template',
        props:['list'],//props中的值无法被改变
        data:function () {
            return {
            }
        }
    })
    var main=new Vue({
        el:'#app-1',
        data:{
            task:'写后台'
        }
    })
</script>
</body>
</html>

用data获取prop中的值

这样就从老板那拿到了一个任务了，然后你说：“这个任务也太简单了吧，我要改个难度大的”，可是老板给你的就这样，能怎么办？当然有办法，我们不还有个data和computed嘛，如果是想要把props中的数据自己用，可以用data函数，把数据赋值给自己的属性中；如果只是想在上面做一些变化，就可以用computed，个人会喜欢用data来进行保存

data:function () {
            return {
                mytask:this.list
            }
        }

监听父组件的值的改变

这样即拿到了父组件的值，又可以对它进行修改，解决了第二个点。那根据第三个点，万一老板突然改任务了怎么办，他又不告诉你，不方，vue已经帮我们准备了一个好东西——watch，监听props传来的数值的变化，同步更新到自己的data数据中去。把老板说的话都记下来，然后去做。

watch:{
    list(val){
        this.mytask=val;
    }
}

prop中引用类型的坑

我们知道，在js中，数据类型分成两种，一种是基础数据类型，一种是引用数据类型（想了解两个的区别的话可以看这里）。那么假如我们接到的任务不是一个，而是一组。现在的情况是，办公室不止你一个人，老板给你和另外两个人都安排了一个任务组，也就是说，3个人做同一个任务。那么按我们之前说的，我们自己用自己的data保存下来了，但是呢，我们看自己的任务太简单，想再往里面加任务，却发现神奇的事情发生了，代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Company</title>
    <style>
        li{
            list-style: none;
        }

        .is-finished{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id="app-1">
    <todo-item :list="task"></todo-item>
    <todo-item :list="task"></todo-item>
    <todo-item :list="task"></todo-item>
</div>
<template id="task-template">
    <ul>
        <li v-for="task in mytask">{{task}}</li>
        <button @click="add">加任务</button>
    </ul>
</template>
<script src="../script/vue.js"></script>
<script>
    Vue.component('todo-item', {
        template: '#task-template',
        props:['list'],//props中的值无法被改变
        data() {
            return {
                mytask:this.list
            }
        },
        methods:{
            add(){
                this.mytask.push('练英语')
            }
        },
        watch:{
            list(val){
                this.mytask=val;
            }
        }
    })
    var main=new Vue({
        el:'#app-1',
        data:{
            task:['写后台','写CSDN']
        }
    })
</script>
</body>
</html>

当我们点击其中一个的时候，发现三个人的任务都增加了，也就意味着，我没办法再自己加自己的任务了，这就是引用类型和基本类型的区别。当我们改变自己的任务内容时，老板的发布的任务的内容也会改变。不是说老板的命令不能改的？是老板的任务并没有改，emmm具体看这里

这个时候，深度克隆了解一下。

踩的坑差不多就这样，还有对象啊什么的，其实也是差不多。好好玩一下，就懂了