單項(xiàng)數(shù)據(jù)流：

一.
父組件可以通過屬性的方式傳輸一些數(shù)據(jù)，子組件接收到處理數(shù)據(jù)

注意點(diǎn)：處理數(shù)據(jù)的時(shí)候，必須先把數(shù)據(jù)克隆一份，不然的話修改數(shù)據(jù)，父組件里面的數(shù)據(jù)也會(huì)被修改；

數(shù)組的深度克?。篴rr.concat( [] );

二.
要想拿到子組件里面的數(shù)組，必須從里面使用this.$emit("數(shù)據(jù)名test"，要傳的數(shù)據(jù)this.data)注冊(cè)事件拋出去,然后將這個(gè)數(shù)據(jù)名用:綁定在組件行間樣式上

 子組件：
 const component1 = {
    methods:{
        //為什么要返回一個(gè)對(duì)象？因?yàn)榻M件很多，如果別的組件直接操作這個(gè)數(shù)據(jù)的話會(huì)被改變，必須用函數(shù)包裹起來，每次實(shí)例化都返回一個(gè)唯一的數(shù)據(jù)
        data () {
            return {
                data:"xxx",
            }
        },
        //點(diǎn)擊事件的時(shí)候?qū)⑺鼟伋鋈?        push () {
            //list就是注冊(cè)的事件
            this.$emit("list",this.data);
        }
    }
    
 }
    //父組件通過子組件綁定的事件函數(shù)拿到數(shù)據(jù)
     <cur-list :list="getdata"></cur-list>;
     
 父組件：
    methods:{
        getdata (data) {
            console.log(data);
        }
    }

三 在已經(jīng)使用的子組件上面，父組件在這注冊(cè)事件，不能觸發(fā)，必須要在子組件里面注冊(cè)這個(gè)事件；

    .native :父組件的事件和子組件關(guān)聯(lián)

    //這樣注冊(cè)的函數(shù)事件父組件不能觸發(fā)
    <cur-list :list="getdata" @click="show"></cur-list>; 
    //必須給事件添加修飾符  :  .native
     <cur-list :list="getdata" @click.native="show"></cur-list>; 

四 保留輸入框之前狀態(tài): keep-alive ,將子組件放在這個(gè)標(biāo)簽下面，相當(dāng)于緩存狀態(tài)，切換的話還能記住上一次的數(shù)據(jù)

    <keep-alive>
    切換：保存上次的內(nèi)容，可以和組件配合使用，當(dāng)你想保存上一次的狀態(tài)的時(shí)候
        輸入框1
        輸入框2
    </keep-alive>
    
    
    切換組件的時(shí)候的方式還有 `is` 
    <component is="type"><component>
    可以綁定,然后父組件定義規(guī)則
    <component :is="type"><component>

五 插槽：slot

    組件：
    const test = {
        template: "<div> <slot name="wow"><slot> </div>"
    }
    
    使用：
    <div id="app">
        <test>
            //這就是插槽預(yù)留的位置
            <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">
                //拿到的是每個(gè)插槽
                <template slot-scope="zidingyi">
                    <li> {{zidingyi.item}} - {{zidingyi.index}} </li>
                </template>
            </inp2>
        </div>