我的 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”方式。有什么办法可以解决吗？
正如您所提到的，您无法使用 Vue 访问 body 标签，但可以使用常规 JavaScript 访问。如果您正在操作 DOM，您需要确保模板已呈现，然后您可以访问 HTML 元素，例如 in mounted()，但当时<body>已经呈现，您的 Vue 应用程序正在运行。因此，您可以使用document.querySelector（或更容易，document.body正如评论中提到的那样）来访问<body>标签。
通常不需要在 Vue 应用程序中直接访问 body 标签。您通常可以以 Vueish 的方式实现相同的目标。在您的情况下，您可以将一个类放在 Vue 应用程序的最高元素 (the App.vue) 上，并让该元素充当您的<body>. 然后，您可以使用 Vue 完全控制模板。
如果您使用的是 Vue 3，并且需要在 Vue 应用程序的最高元素之外有一个托管元素，您也可以使用新<teleport>标签。这例如用于模态叠加，但它不会帮助您向 body 元素添加类。请参阅文档<teleport>。
| 归档时间： |
|
| 查看次数： |
9006 次 |
| 最近记录： |