1.组件通信

组件与组件之间的数据传递

• 父传 子
• 子传 父
• 中央事件总线 $bus
• 状态管理vuex

1.1 回顾页面传值

- 通过url 传值
跳转链接：  url?key=value&key1=value1
接收参数：  location.search      【vue-router】  this.$route.query

- 本地存储
存数据：  localStorage.setItem(key,value)     sessionStorage
取数据; localStorage.getItem(key)

1.2 组件 父传子

在父组件中将数据传递给子组件

子组件需要父组件的数据 做页面的渲染

子组件props 接收到的数据 用法和 data中的数据用法完全一致

#父组件
<子组件 变量=“属性值” 变量1=“属性值1” >  </子组件> 

#子组件 
export default{
	props:["变量","变量1"]
}

# 父组件 自定义属性传参
<子组件 :变量=“表达式”  v-bind:变量1=“表达式” >  </子组件> 

#子组件 
export default{
	props:{
        tilte:{
            type:String,    
            default:"默认值"
        },
        list:{
            type:Array,
            default:()=>[]      
            //引用数据类型的默认值 建议通过函数 返回 赋值（防止引用数据类型的地址问题）
        }
    }
}

1.3 组件 子传父

#父组件
<子组件 变量=“属性值” 变量1=“属性值1” @自定义的事件类型名="执行函数名" >  </子组件> 

export default{
    methods:{
        执行函数名(获取到的子组件的回传参数){
            //业务逻辑
        }
    }  
}

#子组件
export default{
    data(){
        return{
            num:100
        }
    },
    methods:{
        callData(){
            //子传父
            this.$emit("自定义的事件类型名"，需要传递的数据)
        }
    }
}

1.4 中央事件总线 $bus

所有组件需要传递数据 都直接存到 $bus

其他的所有的组件 都可以直接找 $bus 获取 数据

优点：无视层级传数据

缺点：必须在同一个 页面组件中，切换页面后 $bus 就无法触发事件

//main.js  整个程序的入口
Vue.prototype.$bus = new Vue() ;  //中介 新的vue实例对象，专门存取数据  $emit 

//向$bus写入数据--存数据的组件
this.$bus.$emit('自定义的事件类型',数据)

//在组件中获取值 --取数据的组件
//找到当前组件的 created()
created(){
 this.$bus.$on('自定义的事件类型',data=>{
     console.log(data) //获取的数据
 })   
}

2.插槽 slot

父组件把 html 代码 传给子组件

子组件预留 html代码的位置 给父组件

2.1 匿名插槽

子组件的slot标签就是 预留给 父组件 传html代码的位置

#父组件
<子组件>
    #写入替换 slot插槽的html代码
	<html代码>
</子组件>

#子组件
</div>
	#子组件提前给父组件预留的位置 插槽
	<slot></slot>
</div>

2.2具名插槽

如果同一个子组件中出现多个 插槽 必须使用具名插槽

如果是同一个子组件中出现两个 插槽 可以一个匿名 一个具名

#父组件
<子组件>
    <div slot="插槽名1">
    </div>	  		
     <div slot="插槽名2">
    </div>
       <div slot="插槽名3">
    </div>
</子组件>

#子组件
<div>
    <slot name="插槽名1"></slot>    、
    <slot name="插槽名2"> </slot>
      <slot name="插槽名3"> </slot>
<div>

2.3 作用域插槽

将子组件的数据 回传给 父组件的插槽 部分的代码进行使用

一般情况下:作用域插槽 都是基于 具名插槽进行操作

#父组件
<子组件>
    <div slot="插槽名1" slot-socpe="scope">
        {{scope.变量}}
    </div>	  		
     <div slot="插槽名2">
    </div>
</子组件>

#子组件
<div>
    <slot name="插槽名1" :变量=“str”></slot>    、
    <slot name="插槽名2"> </slot>
<div>
data(){
    return {
    	str:'啦啦啦'
    	}
 }

2.4 v-slot

父组件插槽语法简化

#父组件
<子组件>
    <div v-slot="插槽名1">
    </div>	  		
     <div v-slot="插槽名2">
    </div>
</子组件>
#父组件
<子组件>
    <template #插槽名1>
			<div> </div>
	</template>
     <div v-slot="插槽名2">
    </div>
</子组件>

#父组件
<子组件>
    <template  #插槽名1="scope">
			<div >
                {{scope.变量}}
            </div>	
	</template>	
     <div slot="插槽名2">
    </div>
</子组件>