vue 动态组件名_vue: solt内容分发 动态组件

solt内容分发

父组件如何传多个元素给子组件?

直接在父组件中定义的标签中嵌套要传过去的元素，在子元素中使用solt存放即可。

1. style样式在父组件或子组件中使用均可,
2. 在父组件中要传过去的元素中可以使用html模板功能，入{{ }}、v-for等

基础使用:

<!-- 父组件中组件使用的子组件标签中嵌套 -->

子组件中使用solt来存放父组件中传过来的元素

<

扩展使用:

如果在子组件要把传过来的元素分开使用，如何操作?

使用命名区分

在子组件中: 用name命名

<

在父组件中: 使用slot=命名的名字就可以传到相对应的div中

<

注意的点：

1. 如果一个命名，一个没命名，命名的会得到对应自己的元素，没命名的则获得剩余的全部。
2. 如果命名了，但是没有对应的元素，则会使用solt中默认的值

动态组件

component是vue定义的一个组件，类似solt.

先上代码

component标签中有一个is属性，它的值是什么就渲染它代表的组件

使用v-bind绑定is和动态值selectCom

<

问题: 这些组件在切换的时候是注销了呢？还是缓存？

我们在其中一个组件中添加一个计数机试试。

测试方法一:

<

当切换到其他组件，再切换回来的时候，发现被重置0了，说明没有缓存，是注销了再从新创建。

测试方法二:

写一个注销时候的钩子函数destroyed()。

export 

说明要是注销了重新创建。

解决办法：使用keep-alive可以防止注销，实现缓存

<

再生问题: 针对destroyed()函数，没有使用keep-alive可以调用该函数，使用了以后就调用不了destroy()函数，如何再确定是缓存。

解决：vue还提供了activated()和deactivated()函数

activated(): 进入news组件触发该函数

deactivated(): 离开news组件触发该函数

<!-- 组件中的代码 -->

离开或者进入都会触发该对应的钩子函数。