我可以在 vuejs 挂载元素上使用 index.html 文件的属性吗？答案

【问题标题】：Am I able to use properties on the index.html file on the vuejs mount element?我可以在 vuejs 挂载元素上使用 index.html 文件的属性吗？
【发布时间】：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”它将用于从父页面在应用程序中路由

标签： javascript html css vue.js components

【解决方案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");
  },

【讨论】：