Javascript 如何在vue js中引用body标记；“正确的道路”；_Javascript_Vue.js

Javascript 如何在vue js中引用body标记；“正确的道路”；

javascript vue.js

Javascript 如何在vue js中引用body标记；“正确的道路”；,javascript,vue.js,Javascript,Vue.js,我的appSearch组件的布局文件中包含以下代码： <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=

我的appSearch组件的布局文件中包含以下代码：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <title>title</title>
    </head>
    <body>
        <div id ='app' >
            <app-search ref='search'></app-search>
            @include('layouts/header')
            @yield('content')
        </div>
        <script type="text/javascript" src="js/app.js" ></script>
    </body>
</html>


标题
@包括（'布局/标题'）
@产量（‘含量’）

在组件中，我想引用body标记并将其设置为将应用溢出的某个类：hidden。但是，vue不能在div之外使用。我想到的第一件事是document.querySelector。但这不是“vue-ish”的方式。有什么办法吗？

您不能使用Vue访问body标记，但要使用常规JavaScript，如您所述。如果您正在操作DOM，则需要确保已呈现模板，然后您可以访问HTML元素，例如在

mounted（）

中，但此时已呈现

，您的Vue应用程序正在运行。因此，您只需使用

document.querySelector

（或者更容易地使用注释中提到的

document.body

）即可访问

标记

通常不需要直接在Vue应用程序中访问body标签。通常，你可以用一种轻松的方式完成同样的事情。在您的情况下，您可以将一个类放到Vue应用程序的最高元素上（即

app.Vue

），并让该元素充当您的

。然后，您可以使用Vue完全控制模板

如果您正在使用Vue 3，并且需要在Vue应用程序的最高元素之外有一个托管元素，您也可以使用新的

标记。例如，这用于模态覆盖，但它不会帮助您向body元素添加类。请参阅。

在本例中，直接访问DOM是完全正确的。我认为没有办法解决这个问题。不，由于浏览器的限制，我不能让它作为主体元素。溢出：hidden的工作方式与body元素的工作方式不同请注意，您可以使用

document.body

而不是使用

document.querySelector（'body'）

。