Vue组件通信

1、父组件向子组件传值

props透传属性

• 在父组件中使用了这个组件，并传入class、style、事件监听器会透传到该组件里的根元素上（即根元素继承了）
• 可以通过$attrs来透传到根元素以外的其他元素上、以及指定透传到哪个元素上

问题： props逐级透传

如何解决： 父组件提供依赖，注入子组件

• 注入会在组件自身的状态之前被解析，可以在data()访问到注入的属性
• 为了避免注入名冲突，最好使用Smbol作为注入名
• 为了保证提供方和注入方之间的响应性链接，即使得注入保持响应性,需要在provide()这里使用computed()函数提供一个计算属性

插槽

• 为子组件传递一些片段，由父组件提供内容
• 插槽内容可以访问到父组件的数据作用域，，但无法访问子组件的数据，因为插槽内容是在父组件中定义的

具体实现方式：

在<slot>XXXX</slot>插槽里写的内容为指定默认内容，若父组件没有提供任何插槽内容，便展示默认内容，但要是提供了，便会取代默认内容。

具名插槽

• 将插槽内容传入到各自指定的目标插槽出口

具体实现方式：

其中的#header表示为 v-slot:header,   #为v-slot的简写

作用域插槽

• 想要同时使用父组件域内和子组件域内的数据：让子组件在渲染时将一部分数据提供给插槽

具体实现方式：

这里的v-slot也可以写成解构：v-slot="{text, count }"

• 具名插槽的话将表示为：v-slot:name="slotProps" 简写为 #name="slotProps"

示例

2、子组件向父组件通信、调用父组件的方法

子组件使用this.$emit触发自定义事件并传值	父组件监听该事件
template> <button @click="submit">click me export default { methods: { submit() { this.$emit('submit',xxx)} }}	<Child @submit="submit"> export default { methods: { submit(xxx) {} }}
子组件中直接调用this.$parent	父组件：method:{ xxx(){}}; 子组件:   method:{ childFun(){this.$parent.xxx()}

3、父组件直接调用子组件的方法

在子组件标签上添加ref属性,在父组件中可通过该属性调用子组件的方法	method:{ xxx(){this.$refs.child.function()}
通过$emit、$on	子组件中：this.$on('childFun',function(){})  父组件中：<Child ref="child">  method:{ xxx(){this.$refs.child.$emit(childFun)`}