vue-组件传值

插槽

插槽的使用

在组件模板中，我们在代码中需要用外部传入的数据插入某个位置，此时可以使用插槽

<slot></slot>

 在外部使用具有插槽的该组件时

<box>{{msg}}</box>
//box是自己注册的组件，即具有插槽的子组件
//就像插值表达式的使用一样
//{{msg}}是使用的当前组件的数据源（不是box中的）
//也可以像div那样直接写字符串
<box>hello</box>

当然，插槽可能不止一个，我们可以为单个插槽取名

具名插槽

当我们为一个插槽取了名字后，其就是一个具名插槽了

<Box>
    //具名插槽的使用
	<template v-slot:s2>
		<b>5551</b>
	</template>
    //具名插槽使用简写
	<template #s1>
		<a href="#">5552</a>
	</template>
	<i>5553</i>
</Box>

传值

属性传值

通过属性传值的方法我们能够将数据从父组件传给子组件，但子组件不能反向将数据传给父组件，属性传值相关在前面提过

反向传值（实现组件双向数据绑定）

反向传值即实现子组件反向将数据传给父组件的功能

1.自定义

this.$emit(事件名（字符串）,"要给触发的事件的函数传入值")
//写在想触发自定义事件的地方
//父组件中，使用该子组件的地方用v-on绑定事件，事件名即$emit内自定义的事件名，绑定事件为父组件内的函数

2.属性绑定和事件绑定

3.v-model

（1）vue 2.0

vue2.0  v-model是 :value 和 @input

（3）vue 3.0

vue 3.0 v-model:value="key"是  :value @update:value

4.依赖注入

使用 provide 和 inject 进行传值，祖组件使用 provide 将数据传给子组件，子组件使用 inject 接收，但里面的数据源不是响应式的

不推荐使用这种方法

5.$属性

（1）$parent

（2）$root

（3）其它$属性

组件的其它类型

动态组件

有的时候，我们希望页面中的某个地方，在不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件

<component is="box"></component>
<component :is="box2"></component>

 component 标签的 is属性语法：is后跟组件的变量名决定使用哪个组件来渲染

注意: is是组件名 :is是data中的变量中保存的组件名

缓存组件

缓存组件的使用

<keep-alive>
  <component :is="box"></component>
</keep-alive>

 动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件

在keep-alive中还有两种生命函数：

• activated被 keep-alive 缓存的组件激活时调用。

• deactivated被 keep-alive 缓存的组件失活时调用。

当我们没有使用keep-alive时，使用动态组件进行组件切换后，原组件会触发解绑函数（beforeUnmount和unmounted）
 

当然，使用keep-alive时，我们有时候也不希望每一个都缓存，此时可以使用include（表示a,b组件被缓存，其他组件不缓存）和exclude（代表除了xx组件其他的组件缓存）

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

（取自官网）上面是include的用法， exclude同

异步组件

vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验

异步加载并缓存组件：

1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

2、 组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

import {defineAsyncComponent} from "vue"

components: {
			Box: defineAsyncComponent(() => import("./Box.vue")),
    }

Box2: defineAsyncComponent({
			  // 加载函数
			  loader: () => import('./Box4.vue'),
			
			  // 加载异步组件时使用的组件
			  loadingComponent: Loading,
			  // 展示加载组件前的延迟时间，默认为 200ms
			  delay: 200,
			
			  // 加载失败后展示的组件
			  errorComponent: ErrorComponent,
			  // 如果提供了一个 timeout 时间限制，并超时了
			  // 也会显示这里配置的报错组件，默认值是：Infinity
			  timeout: 3000
			})