1. Introduzca el subcomponente HelloWorld.vue en los scripts del componente principal app.vue, por ejemplo
import HelloWorld from './components/HelloWorld'
2. Agregar a los componentes,
components:{
HelloWorld
}
3. Represente el contenido del componente secundario bajo la plantilla del componente principal.
<HelloWorld />
4. El componente principal pasa datos al componente secundario. El código es el siguiente. En , el texto es el nombre del atributo pasado al componente secundario y el mensaje son los datos pasados por el componente principal al componente secundario. Entre ellos: no se puede falta, lo que indica una transmisión dinámica de datos.
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld :text = message />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components:{
HelloWorld
},
data(){
return {
message:'你好,Vue!'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5. El componente secundario recibe los datos y representa la página. El código es el siguiente, donde se utilizan accesorios para recibir los datos de cadena pasados por el componente principal '¡Hola, Vue! ', donde el texto corresponde al nombre del atributo pasado desde el componente principal, el tipo de datos es Cadena y el valor predeterminado es una cadena vacía.
<template>
<p>{
{text}}</p>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
text:{
type:String,
default: ''
}
}
}
</script>