单项数据流：
一.
父组件可以通过属性的方式传输一些数据，子组件接收到处理数据
注意点：处理数据的时候，必须先把数据克隆一份，不然的话修改数据，父组件里面的数据也会被修改；
数组的深度克隆：arr.concat( [] );
二.
要想拿到子组件里面的数组，必须从里面使用this.$emit("数据名test"，要传的数据this.data)注册事件抛出去,然后将这个数据名用:绑定在组件行间样式上
子组件：
const component1 = {
methods:{
//为什么要返回一个对象？因为组件很多，如果别的组件直接操作这个数据的话会被改变，必须用函数包裹起来，每次实例化都返回一个唯一的数据
data () {
return {
data:"xxx",
}
},
//点击事件的时候将它抛出去
push () {
//list就是注册的事件
this.$emit("list",this.data);
}
}
}
//父组件通过子组件绑定的事件函数拿到数据
<cur-list :list="getdata"></cur-list>;
父组件：
methods:{
getdata (data) {
console.log(data);
}
}
三 在已经使用的子组件上面，父组件在这注册事件，不能触发，必须要在子组件里面注册这个事件；
.native :父组件的事件和子组件关联
//这样注册的函数事件父组件不能触发
<cur-list :list="getdata" @click="show"></cur-list>;
//必须给事件添加修饰符 : .native
<cur-list :list="getdata" @click.native="show"></cur-list>;
四 保留输入框之前状态: keep-alive ,将子组件放在这个标签下面，相当于缓存状态，切换的话还能记住上一次的数据
<keep-alive>
切换：保存上次的内容，可以和组件配合使用，当你想保存上一次的状态的时候
输入框1
输入框2
</keep-alive>
切换组件的时候的方式还有 `is`
<component is="type"><component>
可以绑定,然后父组件定义规则
<component :is="type"><component>
五 插槽：slot
组件：
const test = {
template: "<div> <slot name="wow"><slot> </div>"
}
使用：
<div id="app">
<test>
//这就是插槽预留的位置
<span></span>
<test>
</div>
六. 作用域插槽 slot-scope:
子组件：
const inp2 = {
props:['list'],
template:`<div>
组件2: <input type="text">
<ul>
<slot v-for="(item,index) in list"
:key="item"
:index = "index"
:item = "item"
>
</slot>
</ul>
</div>`
};
使用：
<div id="app">
//父组件里面的data
<inp2 :list="data">
//拿到的是每个插槽
<template slot-scope="zidingyi">
<li> {{zidingyi.item}} - {{zidingyi.index}} </li>
</template>
</inp2>
</div>
