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

Question

<!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"> 元素的属性。我尝试使用适用于基本应用程序的网络组件，但另一个要求是我需要能够覆盖父网页中的 CSS 变量，并且在创建网络组件时，vue 使用阴影创建它们 - dom。有没有更好的方法从vue挂载元素中获取值？

Answer 1

可以使用全局变量将数据从页面传递到入口点：

<script>
window.myApp = {
  foo: 'bar'
}
</script>
<div id="app"></div>

并在应用程序内部访问 window.myApp.foo。

任意字符串数据（包括JSON）可以通过HTML属性传递，data属性通常用于此目的：

<div id="app" data-foo="bar"></div>

并在应用程序内部访问 document.querySelector('#app').dataset.foo。

Answer 2

解决了我的问题

我能够使用

从 index.html 安装到我的 App.vue 文件中获取属性

  beforeMount() {
    this.neededData = this.$parent.$el.getAttribute("thisIsAProp");
  },

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

Am I able to use properties on the index.html file on the vuejs mount element?

html

javascript

css

components

vue.js