Question

我的布局文件中的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>

在组件中，我要引用主体标记并将其设置为将应用溢出的某些类：隐藏。但是vue不能在div之外使用。我想到的第一件事是document.querySelector。但这不是“虚假的”方式。有什么办法解决吗？

Answer 1

您不能使用Vue来访问body标签，而是使用常规JavaScript来访问。如果您要操作DOM，则需要确保已渲染模板，然后可以访问HTML元素，例如mounted()中，但<body>当时已经渲染，您的Vue应用正在运行。因此，您可以只使用document.querySelector（或更容易地使用注释中提到的document.body）来访问<body>标签。

通常不需要直接在Vue应用程序中访问body标签。通常，您可以通过Vueish方式实现相同的目标。就您而言，您可以将一个类放到Vue应用程序的最高元素（App.vue）上，然后让该元素充当您的<body>。然后，您可以使用Vue完全控制模板。

我如何在Vue JS中“正确地引用”身体标签

1 个答案: