vue 传参 和 插槽

组件传参

1. provide 和 inject 祖先后代传值

 传   provide(){   //使用函数return的方式可以传动态值，如list
            return{
                name:"朝北",
                obj:{num:1},
                list:this.list,
                changeList:this.changeList    
            }
    },

 收 inject:['name','obj','list','changeList']

2. 兄弟组件传承 //父组件是同一个

 传 this.$parent.$emit("foo",6)

 收 created(){
       this.$parent.$on('foo',(num)=>{
           console.log(num)
       })
    }  

3.$Bus 中央总线

全局使用

  // 在main.js里
  Vue.prototype.$bus = new Vue()

  传 this.$bus.$emit('foo','ni')

  收 mounted() {
       this.$bus.$on("foo", e => {
             alert(e)
         })  
     },

4.插槽

匿名插槽

 // 父组件
<comp> hello </comp> 

 // 子组件 
<div>
   <slot></slot>
</div>

具名插槽

           <h1>父组件</h1>
           <index2>
                <div slot="3">我是三</div>
                <div slot="1">我是一</div>
                <div slot="2">我是二</div>
           </index2>

           //子组件 index2
            <div>
                <p>子组件</p>
                <slot name="1"></slot>
                <slot name="2"></slot>
                <slot name="3"></slot>
            </div>

作用域插槽 显示的是子组件里的数据

        <h1>父组件</h1>
        <index2>
             <div  slot-scope="recData">
                   <p> <span>姓名：</span> {{recData.b}} </p>
                   <p> <span>年龄：</span> {{recData.age}} </p>
             </div>
        </index2>



                 <h1>子组件</h1>
         <slot b="jinmao" age="250"></slot>