我可以在 vuejs 挂载元素上使用 index.html 文件的属性吗？
Posted
技术标签:
【中文标题】我可以在 vuejs 挂载元素上使用 index.html 文件的属性吗？【英文标题】：Am I able to use properties on the index.html file on the vuejs mount element? 【发布时间】：2021-12-21 23:07:16 【问题描述】：<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without javascript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app" thisIsAProp="This is what I need"></div>
<!-- built files will be auto injected -->
</body>
</html>
所以在我的 main.js 文件中，应用程序安装在#app 上。在我的 App.js 文件中，我需要 <div id="app"> 元素上的属性。我尝试使用适用于基本应用程序的 web 组件，但另一个要求是我需要能够覆盖父网页中的 CSS 变量，并且在创建 web 组件时，vue 使用 shadow-dom 创建它们。有没有更好的方法从 vue mount 元素中获取值？
【问题讨论】：
什么样的价值观？thisIsAProp 不是道具，所以你不能传递任何你想要的东西
我想得到一个没有空格的简单字符串，比如“page-four”它将用于从父页面在应用程序中路由
【参考方案1】：
数据可以通过全局变量从页面传递到入口点：
<script>
window.myApp =
foo: 'bar'
</script>
<div id="app"></div>
并在应用程序内部访问，如window.myApp.foo。
可以通过 HTML 属性传递任意字符串数据（包括 JSON），data 属性通常用于此目的：
<div id="app" data-foo="bar"></div>
并在应用程序内部访问，如document.querySelector('#app').dataset.foo。
【讨论】：
【参考方案2】：解决了我的问题
我能够将 index.html 中的属性安装到我的 App.vue 文件中使用
beforeMount()
this.neededData = this.$parent.$el.getAttribute("thisIsAProp");
,
【讨论】：
以上是关于我可以在 vuejs 挂载元素上使用 index.html 文件的属性吗？的主要内容，如果未能解决你的问题，请参考以下文章