Vue组件通信方式

第一种： props

适用场景：

注意事项：

路由的props配置项

第二种：自定义事件

适用场景：

使用：

第三种：全局事件总线（$bus）

适用场景：

使用：

第四种 ：消息订阅与发布   pubsub-js

第五种：vuex

适用场景：

第六种：插槽

适用场景

1. 默认插槽：

2. 具名插槽：

3. 作用域插槽：

---

第一种： props

适用场景：

父子组件通信

注意事项：

1. 如果是父组件给子组件传递数据（函数）：本质就是子组件给父组件传递数据

2. 如果是父组件给子组件传递数据（非函数）：本质就是父组件给子组件传递数据

书写方式（3种）

传递数据：<Demo name="xxx"/ >

接收数据：

1. 第一种方式（只接收）：props:['name']

2. 第二种方式（限制类型）：props:{name:String}

3. 第三种方式（限制类型、限制必要性、指定默认值）：

props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

路由的props配置项

作用：让路由组件更方便的收到参数

 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件

   // props:{a:900}

第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件

 props:true

第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

props(route){
        return {
            id:route.query.id,
            title:route.query.title
        }
    }

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

第二种：自定义事件

适用场景：

子组件 ===> 父组件 ，

使用：

A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

绑定自定义事件：

1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

2. 第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

触发自定义事件：this.$emit('atguigu',数据)

解绑自定义事件this.$off('atguigu')

第三种：全局事件总线（$bus）

适用场景：

任意组件间通信

使用：

安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
}) 

使用事件总线：

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

2. 提供数据：this.$bus.$emit('xxxx',数据)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

第四种 ：消息订阅与发布   pubsub-js

在React中常用

第五种：vuex

适用场景：

任意组件间通信

第六种：插槽

适用场景

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

1. 默认插槽：

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

2. 具名插槽：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

3. 作用域插槽：

1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

2. 具体编码：

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>