<!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> Entonces, en mi archivo main.js, la aplicación está montada en #app. En mi archivo App.js necesito las propiedades en el elemento <div id="app"> . Intenté usar componentes web que funcionaron para una aplicación básica, pero otro requisito es que necesito poder sobrescribir las variables CSS dentro de la página web principal, y al crear componentes web, vue los crea con un shadow-dom. ¿Hay una mejor manera de obtener los valores del elemento de montaje vue?
Los datos se pueden pasar de la página al punto de entrada con variables globales:
<script> window.myApp = { foo: 'bar' } </script> <div id="app"></div> Y se accede dentro de la aplicación como window.myApp.foo .
Los datos de cadenas arbitrarias (incluido JSON) se pueden pasar a través de atributos HTML; los atributos de data suelen tener este propósito:
<div id="app" data-foo="bar"></div> Y se accede dentro de la aplicación como document.querySelector('#app').dataset.foo .
Resolvió mi problema
Pude obtener las propiedades del montaje index.html en mi archivo App.vue usando
beforeMount() { this.neededData = this.$parent.$el.getAttribute("thisIsAProp"); },