Vue -检测插槽内的组件
Vue -检测插槽内的组件
提问于 2020-09-29 14:32:33
我的瓷砖组件里有这个插槽。基本上，我需要检测到一个特定的其他组件，它应该在这个插槽内使用，但是插槽还支持其他html标记，而不仅仅是这个特定的组件。是否有一种检测特殊部件的方法，例如插槽内的<listitem />？
<div class="tile">
<template v-if="$slots['headline']">
<slot name="headline" />
</template>
</div>编辑基本思想如下
<tile>
<template #headline>
<listitem />
</template>
</tile>
<tile>
<template #headline>
<h1>Some headline</h1>
</template>
</tile>我有这两个选项，你如何可以提高这个标题插槽。如果只有一个普通的html标记，例如<h1>，我想应用相应的css样式。如果有<listitem />组件，我需要应用其他样式
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-29 20:42:47
当插槽的内容作为通过诺德氏访问的这个.$插槽数组传递给组件时(如果是作用域插槽，则是VNode的函数返回数组)，您可以编写如下函数：
methods: {
isListitem() {
return this.$slots.headline && this.$slots.headline[0].tag.endsWith('-listitem')
}
}的主要问题是，$slots不是反应性的
医生:请注意，插槽不是被动的。如果您需要基于传递给时隙的数据更改重新呈现组件，则建议考虑使用依赖于反应性实例选项(如props或data )的不同策略。
因此，我不建议这样做，并遵循Vue文档建议使用props .
Stack Overflow用户
发布于 2020-09-29 15:06:50
也许您可以使用一个函数来尝试通过js获取这个元素，如下所示：
我不确定它的意志是否有效。
function checkElement(){
var listitem = document.querySelector("listitem");
if(listitem) {
// if exist do something
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64121792
复制相关文章
相似问题
腾讯云开发者
