vue组件基础

单项数据流：

一.
父组件可以通过属性的方式传输一些数据，子组件接收到处理数据

注意点：处理数据的时候，必须先把数据克隆一份，不然的话修改数据，父组件里面的数据也会被修改；

数组的深度克隆：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>