vue 使用<slot>和v-show 同时使用的问题

今天在使用<slot>插槽时，出来一个问题，那就是使用v-show的标签没有被执行

但是，<slot>插槽的功能是可以正常使用的。

废话不多说了，下面先看图，然后在说解决办法：

想要问题再现，照着上的写一些就行，我这里使用的modal模板是 iview 提供的，至于安装自己去官网上看

在中父组件使用了<slot>和v-show

解决办法：

v-show 改成 v-if

网上找到了解释是：

就跟<template></template>一样页面上跟本没有这个标签对，当然没办法在其上添加css display属性了，所以对 <slot> <template> 都不能使用 v-show 改用 v-if

slot 不能用v-show，只能使用v–if

vue $slots 传送门

vue $attrs 传送门

$attrs 一个包含了组件所有透传 attribute 的对象（不包含已定义的 props ）。

透传 Attribute 是一些由父组件传入的 attribute 和 事件处理器 ，且没有在此子组件中声明为一个 prop 或 要抛出的事件 。

默认情况下，若是单一根节点组件， $attrs 中的所有 property 都是直接自动继承自组件的根元素。而多根节点组件则不会如此，同时你也可以通过配置 inheritAttrs 选项来显式地关闭该行为。

$slots 一个表示父组件所传入 插槽 的对象。

通常用于手写 渲染函数 ，但也可用于检测是否存在插槽。

每一个插槽都在 this$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this$slotsdefault 。

如果插槽是一个 作用域插槽 ，传递给该插槽函数的参数可以作为插槽的 prop 提供给插槽。

局部注册的组件，只能在当前Vue实例中使用，并且在其子组件中不可用。

在 components 选项中定义局部组件。每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。

组件名称： 自定义，可以使用驼峰命名方式或者短横线的命名方式，但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。

template选项： 定义组件的模板。模板中必须包含一个根标签。

props选项： 定义组件标签上的属性。驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。注意：props是只读的，不能修改（ 解决办法： 在data中对props接收到的数据进行中转）。

data： 定义组件的数据。注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。

全局注册的组件可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

使用 Vuecomponent 来创建全局组件。Vuecomponent的第一个参数就是组件名。

$emit()用于触发自定义事件。注意：事件名称中不能采用大写字母。

效果：

效果：

slot 用于在组件的内部定义插槽，组件标签之间的所有html内容，会在插槽所在位置呈现。

效果：

以上就是关于vue 使用<slot>和v-show 同时使用的问题全部的内容，包括:vue 使用<slot>和v-show 同时使用的问题、Vue3 属性透传 $attrs 与 插槽透传 $slots、Vue——自定义组件 & 自定义事件$emit & 插槽slot等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！