如何根据父元素是不是具有特定类来设置 vue 组件属性？

Posted 2023-02-23

【中文标题】如何根据父元素是不是具有特定类来设置 vue 组件属性？

【英文标题】：How to set vue component property based on if parent element has a specific class?如何根据父元素是否具有特定类来设置 vue 组件属性？

【发布时间】：2020-09-23 07:14:05

【问题描述】：

我的父组件中有这个结构：

<div class="section" >
    <VRVideoPage :isActive="false"></VRVideoPage>
</div>

通过第三方工具，“section”-div 可能会添加一个名为“active”的 css 类。

我现在想将 VRVideoPage 组件上的 ":isActive" 属性切换为 true，每当活动类应用于其父级时。

这可以通过 vue 模板语法实现吗？

【问题讨论】：

类属性不是反应性的。您应该通过第三方工具将 active 类添加到 data 部分中的道具。这样你就可以在 div 部分中使用 prop moth 并传递给 VRVideoPage

谢谢@Anatoly。这为我指明了正确的方向

【参考方案1】：

你可以这样尝试，但这不是一个好的做法，可能行不通：

<div class="section" >
    <VRVideoPage ref="video" :isActive="$refs.video.$el.parentNode.classList.contains('active')"></VRVideoPage>
</div>

【讨论】：

如果我们这样做，您可以将其缩短为仅使用$el.parentNode（应该是组件的根节点）。不需要裁判。即使我认为，您的示例也应该返回包装器 div（在组件中）。

如果您按照您建议的方式缩短它 - 那么$el 将引用当前组件/模板而不是VRVideoPage 组件。我们可以将 ref 放在外部 DIV 上，然后跳过 parentNode - 但是如果某些 3rd 方脚本更改 DOM 树，则无法保证 ref 将继续存在...

Ehh 但是div.section 和$el 一样（组件的根元素），实际上和你的$refs.video.$el.parentNode 一样，你选择了第一个孩子，然后用parentNode 回去？所以那将是$el，除非你走出我认为他想要的组件，因此$el.parentNode。

我承认你说的是真的——但前提是显示的代码是他的整个模板，而不仅仅是它的摘录（因为他说的是I have this structure in my component而不是This is the template of my component

谢谢大家。 parentNode 是一个非常有用的东西。 @Anatoly 在我原来的问题下的评论为我指明了正确的方向，提到类属性没有反应。