Vue—组件通信-CSDN博客

本文链接：https://blog.csdn.net/m0_48884170/article/details/137921084

5.ref 引用 - 获取 DOM 元素——ref 用来辅助开发者，获取 DOM 元素或组件实例的引用。

7.1动态组件指的是，使用 vue 内置的组件，来动态切换组件的显示与隐藏。

7.2 使用 keep-alive 保持状态

7.3 被 keep-alive 缓存的组件的生命周期函数

8.插槽——插槽（slot）可以提高组件的复用性。

8.1在封装组件时，可以定义一个插槽（坑位），用来接收使用组件时传递过来的内容。

8.2 为插槽提供默认内容封装组件时，可以为插槽设置默认内容。在使用组件时，没有为插槽提供任何内容，则默认内容会生效。

11.sync修饰符——.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

12.inheritAttrs

12.1 inheritAttrs 为true(默认值)

12.2 inheritAttrs 为false

1. 组件之间的关系

在项目开发中，组件之间的关系分为如下两种：
① 父子关系
② 兄弟关系

2. 父子组件之间的数据通信

① 父 -> 子传递数据
② 子 -> 父传递数据

2.1 父组件向子组件传递数据

父组件向子组件传递数据需要使用自定义属性和 prop

2.2 子组件向父组件传递数据

子组件向父组件传递数据使用自定义事件和 $emit 方法

3. 兄弟组件之间的数据通信

兄弟组件，他们之间就没有一个直接的关联关系。所以想要进行通信，就需要借助第三方来作为一个桥梁，才能实现通信。（EventBus）

EventBus 的使用步骤
① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
② 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件
③ 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

4.祖孙之间通信

①$attrs是用来将数据从爷组件传递给孙组件的。

②$listeners是用来从孙组件中触发爷组件中事件的。

$attrs的使用：

在爷组件(index.vue)中，类似props传值，将需要传递的值绑定在父组件上。
在父组件中，也是类似props传值，但是这里传递的就不是值了，而是$attrs。
在孙组件中，接收props，这样就可以在孙组件中使用这个数据了。

(需要注意的是父组件中不需要接收props，只要在孙组件中接收就可以。）

$listeners的使用：

在爷组件(index.vue)中，绑定事件。
在父组件中，也是类似绑定事件，但是这里绑定的不是具体的事件，而是v-on="$listeners"。
在孙组件中，需要的时候触发($emit)这个事件即可

5.ref 引用 - 获取 DOM 元素——ref 用来辅助开发者，获取 DOM 元素或组件实例的引用。

5.1使用 ref 获取 DOM 元素

5.2使用 ref 获取组件实例

5.3实现按钮和文本框切换展示

5.4让文本框自动获得焦点

需求：当文本框展示出来之后，希望它立即获得焦点。

6.$nextTick 函数的作用

this.$nextTick(cb) 方法——$nextTick(cb) 方法中的 cb 回调函数，会在组件的 DOM 更新完成之后，再执行。从而能保证在 cb 回调函数里面可以拿到最新的 DOM 元素。

7.动态组件

7.1动态组件指的是，使用 vue 内置的组件，来动态切换组件的显示与隐藏。

7.2 使用 keep-alive 保持状态

切换组件时，会将隐藏的组件销毁掉，显示时，会重新创建。因此无法保持组件的状态。所以可以使用 <keep-alive>，将组件缓存，从而保持动态组件的状态。

include 属性用来指定：只有 include 属性中包含的组件会被缓存。多个组件名之间使用英文的逗号分隔

7.3 被 keep-alive 缓存的组件的生命周期函数

被 keep-alive 缓存的组件，会有两个生命周期函数。
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。

8.插槽——插槽（slot）可以提高组件的复用性。

使用插槽可以给组件传递一段 html 内容（注意：默认情况下，使用组件时，在组件的开始和结束标签中间传递的内容将会被丢弃。）

8.1在封装组件时，可以定义一个插槽（坑位），用来接收使用组件时传递过来的内容。

在使用组件时，可以在组件的开始和结束标签中间传递一段 html 内容，这段内容就会被渲染到组件中插槽所在的位置。

8.2 为插槽提供默认内容封装组件时，可以为插槽设置默认内容。在使用组件时，没有为插槽提供任何内容，则默认内容会生效。

8.3 具名插槽

当我们从外界传递过来多个内容时，这时就需要设置多个插槽进行接收，为了区分不同的插槽，就需要为插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。
第一步：在封装组件时，给插槽起一个名字

第二步：在使用组件，向插槽传递内容的时候，指定要给哪个插槽传递。

8.4 默认插槽

默认插槽：没有指定 name 名称的插槽，叫做默认插槽，它有隐含的名称叫做 “default”。将来使用组件的时候，所有没有指定要传给具名插槽的内容，都会被默认插槽所接收。

8.5具名插槽新语法的简写形式

跟 v-on 和 v-bind 一样，v-slot 也有简写形式，即把 v-slot: 替换为 #。
例如 v-slot:title 可以被重写为 #title

8.6作用域插槽

使用组件时，给插槽传递的内容中，使用的数据如果是来自组件内部，那么这个插槽就是作用域插槽。

第一步：封装组件时，在 slot 上绑定自定义属性，来传递数据。

第二步：在使用组件时，接收组件内部传递出来的数据。

8.7解构插槽

作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。

9.$parent和$children

9.1.$children组件属性

官方介绍：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。

即$children是组件自带的属性，它可以获取到当前组件的子组件，并以数组的形式返回。

9.2.$parent

官方介绍：指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

如果组件没有父组件，他的$parent为undefined，App组件(根组件)的$parent不是undefined，也不是App本身。

如果组件有多个父亲，但是$parent只能找到一个，建议慎用。

10.provide和inject

provide与inject的传值与props类似，前者可以给后代组件传值，而props是只能给子组件传值。

例：a组件里调用了b组件，同时b组件里调用了c组件

a组件可以用props方法直接传数据给b组件，但不能传数据给c组件
a组件可以用 provide与inject 方法直接传递数据给b组件，也可以直接给c组件传值

注意：是用provide与inject方法传值，如果值修改后面组件的值是不会跟着变得，值不会响应

解决办法：把传的数据变成复杂类型的数据，例如传一个对象

这样就可以的到一个可以响应的数据，如果想改变直接this.passdata.msg去修改。

11.sync修饰符——.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

12.inheritAttrs

默认情况下父作用域的不被认作 props的attribute 绑定(attribute bindings)将会“回退”且作为普通的HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过实例 property Sattrs 可以让这些attribute 生效，且可以通过v-bind显性的绑定到非根元素上。（注意：这个选项不影响 class 和 style 绑定）