vue 使用<slot>和v-show 同时使用的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 使用<slot>和v-show 同时使用的问题相关的知识，希望对你有一定的参考价值。
参考技术A 今天在使用<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 slot 插槽
Vue 的插槽感觉上是一个组件函数，和函数一样进行参数的传递来改变组件的据题内容。
使用指令：v-slot
//插口的基本使用
<body> <div id="app"> <!-- 传入元素参数 --> <login><span>demo</span></login> </div> </body> <template id="login"> <div> <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数--> <slot><h3>heee</h3></slot> </div> </template> <script> const login = { template:"#login" } new Vue({ el:"#app", components:{ login } }) </script>
当要有多个插口时，各个插口是如何分辨插口的内容的。
<body> <div id="app"> <!-- 传入元素参数 --> <login>
//必须通过template进行包裹 使用v-slot命令进行具名分析 <template v-slot:name1> <span >demo1</span> </template> <template v-slot:name2> <span>demo2</span> </template> <template v-slot:name3> <span >demo3</span> </template> </login> </div> </body> <template id="login"> <div> <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数--> <slot name="name1"><h3>插口1</h3></slot> <slot name="name2"><h3>插口2</h3></slot> <slot name="name3"><h3>插口3</h3></slot> </div> </template> <script> const login = { template:"#login" } new Vue({ el:"#app", components:{ login } }) </script>
//感觉上和命名视图相类似的使用
// 编译作用域 <navigation-link url="/profile"> Clicking here will send you to: {{ url }} <!-- 这里的 `url` 会是 undefined，因为 "/profile" 是 _传递给_ <navigation-link> 的而不是 在 <navigation-link> 组件*内部*定义的。 --> 在template元素中使用的属性只能在tempalte中 外部是无法访问到的。 </navigation-link>
//父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
//子组件的数据显示样式改变 不是默认的显示模式
<body> <div id="app"> <!-- 传入元素参数 --> <login> <!-- 绑定的数据是将上就是子组件中的数据 但是 只是可以改变数据的输出样式 也就是父组件替换插槽的标签 内容还是由子组件提供 --> <template v-slot:default="slotProps"> ----{{slotProps.user.uel}} </template> </login> </div> </body> <template id="login"> <div> <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数--> <slot v-bind:user="user">{{user.name}}</slot> </div> </template> <script> const login = { template:"#login", data:function(){ return { user:{ name:"xiaoming", uel:"ddd" } } } } new Vue({ el:"#app", data:{ }, components:{ login } }) </script>
以上是关于vue 使用<slot>和v-show 同时使用的问题的主要内容，如果未能解决你的问题，请参考以下文章