我如何在 vue js 中“正确地”引用 body 标签

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>

在组件中，我想引用 body 标记并将其设置为一些将应用溢出的类：隐藏。 但是 vue 不能在 div 之外使用。 我首先想到的是 document.querySelector。 但这不是执行此操作的“vue-ish”方式。 有什么办法可以解决吗？

Answer 1

正如您所提到的，您无法使用 Vue 访问 body 标签，但可以使用常规 JavaScript 访问。 如果您正在操作 DOM，您需要确保模板已呈现，然后您可以访问 HTML 元素（例如，在mounted() ，但<body>当时已经呈现，您的 Vue 应用程序正在运行。 因此，您可以仅使用document.querySelector （或者更容易地使用注释中提到的document.body ）来访问<body>标签。

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

如果您使用的是 Vue 3，并且需要在 Vue 应用程序的最高元素之外有一个托管元素，您还可以使用新的<teleport>标签。 这例如用于模态叠加，但它不会帮助您向 body 元素添加类。 请参阅<teleport>的文档。

我如何在 vue js 中“正确地”引用 body 标签

问题描述

1 个解决方案

解决方案1
9 已采纳 2018-11-25 10:35:52

我如何在 vue js 中“正确地”引用 body 标签

问题描述

1 个解决方案

解决方案1 9 已采纳 2018-11-25 10:35:52

解决方案1
9 已采纳 2018-11-25 10:35:52