Passing values from parent components to child components (using properties to pass values)
1. Define the value to be passed in the parent component There are 2 large types
1. The passed value includes string number boolean
2. Passing by reference includes changing one place of the array object, and all references are changed
2. Use v-bing to bind the value to the child component label.
3. Use props to receive the bound value in the child component.
4. Finally, you can get and operate this value through this in the methods in methods.
For example: in the parent component
<template>
<div id="home">
<header v-bind:fu="ti"></header>
<footer v-bind:fu="ti"></footer>
</div>
</template>
<script>
import Header from './Header'
import Footer from './Footer'
export default {
name: 'home',
components:{
"header":Header,
"footer":Footer,
},
data(){
return{
ti: "I am a string passed down from father to son"
}
},
name:
'header'
,
// props:["fu"],
//property pass
props:{
//Receive the message from the parent
fu:{type:
String
,required:
true
}
},