vue.js - template - Vue ''export default'' vs ''new Vue''
vue single file components (3)
Cuando usted declara:
new Vue({
el: ''#app'',
data () {
return {}
}
)}
Esa es típicamente su instancia de Vue raíz de la que desciende el resto de la aplicación. Esto cuelga del elemento raíz declarado en un documento html, por ejemplo:
<html>
...
<body>
<div id="app"></div>
</body>
</html>
La otra sintaxis es declarar un componente que puede registrarse y reutilizarse más tarde. Por ejemplo, si crea un componente de archivo único como:
// my-component.js
export default {
name: ''my-component'',
data () {
return {}
}
}
Luego puedes importar esto y usarlo como:
// another-component.js
<template>
<my-component></my-component>
</template>
<script>
import myComponent from ''my-component''
export default {
components: {
myComponent
}
data () {
return {}
}
...
}
</script>
Además, asegúrese de declarar sus propiedades de data como funciones, de lo contrario no van a ser reactivas.
Acabo de instalar Vue y he seguido algunos tutoriales para crear un proyecto utilizando la plantilla de paquete web vue-cli. Cuando crea el componente, observo que enlaza nuestros datos dentro de lo siguiente:
export default {
name: ''app'',
data: []
}
Mientras que en otros tutoriales veo datos vinculados desde:
new Vue({
el: ''#app'',
data: []
)}
¿Cuál es la diferencia y por qué parece que la sintaxis entre los dos es diferente? Tengo problemas para conseguir que el código ''nuevo Vue'' funcione dentro de la etiqueta que estoy usando desde App.vue generado por vue-cli.
export default se utiliza para crear un registro local para el componente Vue.
Aquí hay un gran artículo que explica más sobre los componentes https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
<template>
<my-components></my-components>
</template>
<script>
import myComponents from ''my-components''
export default {
components: {
myComponents
}
data () {
return {}
}
created(){},
methods(){}
}
</script>