时间戳

首页 > 解决方案 > 如何根据父元素是否具有特定类来设置 vue 组件属性？

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

问题描述

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

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

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

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

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

标签： vue.jsvuejs2vue-component

解决方案

您可以尝试这样，但这不是一个好习惯，可能不起作用：

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

推荐阅读