Vue.js: ¿Cómo especificar props en un solo componente de archivo?
Estoy definiendo un componente de archivo único
Quiero usar la opción props en ese componente.
Pero ¿dónde puedo añadir el código?
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
// note: changing this line won't causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg: 'Hello World!'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
color: #42b983;
}
</style>
3 answers
Después de un largo tiempo de experimento, encontré una solución práctica:
La estructura del archivo del proyecto:
src/
assets/
components/
Home.vue
App.vue
main.js
package.json
config.js
index.html
Ahora, queremos acceder a los campos de vm del componente raíz {App
dentro del subcomponente Home.vue
, con vue-route
activado.
Main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter);
let router = new VueRouter();
router.map({
'/': {
name: 'home',
component: require('./components/Home')
}
});
router.start(App, 'body');
App.vue:
<template>
<p>The current path: {{ $route.path }}.</p>
<p>Outer-Value: {{ outer_var }}</p>
<hr/>
<!-- The below line is very very important -->
<router-view :outer_var.sync="outer_var"></router-view>
</template>
<script>
import Home from './compnents/Home.vue'
export default {
replace: false,
components: { Home },
data: function() {
return {
outer_var: 'Outer Var Init Value.'
}
}
}
</script>
A casa.vue
<template>
<div>
<p><input v-model="outer_var" /></p>
<p>Inner-Value: {{ outer_var }}</p>
</div>
</template>
<script>
export default {
// relating to the attribute define in outer <router-view> tag.
props: ['outer_var'],
data: function () {
return {
};
}
}
</script>
Conclusión
Tenga en cuenta que el prop interno enlazó la propiedad en el atributo del componente tag (<router-view>
Tag en este caso.), NO directamente en el componente padre.
Entonces, debemos enlazar manualmente el campo props de paso como un atributo en la etiqueta del componente. Véase: http://vuejs.org/guide/components.html#Passing-Data-with-Props
También, observe que usé un .sync
en ese atributo, porque el enlace es unidireccional hacia abajo por defecto: http://vuejs.org/guide/components.html#Prop-Binding-Types
Se puede ver, compartiendo la el estado a través de los componentes de anidamiento es un poco confuso. Para hacer una mejor práctica, podemos usar Vuex.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-17 14:41:20
Puedes hacerlo así:
app.js
<template>
<div class="hello">
<h1>{{ parentMsg }}</h1>
<h1>{{ childMsg }}</h1>
</div>
</template>
<script>
export default {
props: ['parentMessage'],
data () {
return {
childMessage: 'Child message'
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
data() {
return {
message: 'Parent message'
}
},
render(h) {
return h(App, { props: { parentMessage: this.message } })
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-04 08:21:37
Desde hace un par de meses, Vue tiene su propia guía de estilo para referencias y cosas como esta. Los accesorios son una de las referencias, en realidad una esencial.
MAL
props: ['status']
Bueno
props: {
status: String
}
Aún mejor
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
Puedes encontrar más sobre esto aquí
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-17 08:20:55