vue基础（8）--slot插槽-provider

import Vue from 'vue'

const ChildComponent = {
       inject:['yeye','value']             //重点，结合provide，上下多级传递值
       template:`<div>
                    childComponent
                 </div>`,
    mounted:{
        console.log(this.yeye,this.value)
    }
}
const component = {
    name:'component',
    compoennts:{
        ChildComponent
    },
    template:`<div>
            <div :style="style">
                <div class="header">
                  <slot name="header"></slot>  //具名插槽
                </div>
                <div class="footer"></div>
                   <slot value="456" aaa="999"></slot>       //作用域插槽
                </div>
                <child-component></child-component>
       </div>`,
    data(){
        return {
            style:{
                width:'200px',
                height:'200px',
                border:'1px solid #aaa'
            }
        }
    },
    model:{
        prop:'value1', //
        event:'change'  //
    },
    props: ['value1'],    methods:{
        handleInput(e){ 
            this.$emit('change',e.target.value)
        }
    }
}

new Vue({
    el:'#root',
    provide(){                                   //跨层*级*组件通讯，注：Vue默认不是react的
        const data={}
        Object.defineProperty(data,'value',{     //***重点**
            get:()=>this.value,                  //变为响应式
            enumerable:true                      //变为响应式
        }),
        return {                                 //通过return方法传值
          yeye:this,                             //非响应式
          data                                   //变为响应式
        }
    },
    components:{
       CompOne:component
    },    
    propsData:'xxx ',                            //用传入prop失败
  data:{
        return {
            value:"123"
        }
    },
    mounted(){
        console.log('this.refs.comp')
        console.log('this.refs.span')
    },
    template:`<div>
            <comp-one ref="comp">
                <span slot="header" ref="span">this is content</content>        //具名插槽
                <span slot-scope="props">{{props.value}}{{props.aaa}}</content> //注意这儿拿到的是456999
            </comp-one>
        </div>`,
})

重点：

1. 作用域插槽，传值slot-scope="props" {{props.value}}
   
2. 通常可以$parent可以拿到上级组件,跨层级传值通过provider
   
3. 父级（跨级）提供provider，子集inject引用。提供的参数不是响应式的，要做处理。

注意：

    官网说这种方法尽量不用，可能有坑，后续更新处理方案