In the world of Vue, is the communication between father and son like in the real world?
First create a parent-child component relationship
<div id="father">
<h1>{
{
name}}</h1>
<son></son>
</div>
<template id="son">
<h2>{
{
name}}</h2>
</template>
const son = {
template:"#son",
data() {
return {
name:'我是你儿子'，
job:'coder'
}
}
}
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
asset:{
house:'180平方米',
car:'顶配小刀电动车',
money:'50块钱'
}
components:{
son,
}
})
Print on page
Father to son
-
Pass props:{}
-
The parent component puts the data used by the child component in the data, that is, the parent component does not need to make any changes
The child component is written like this
- The props store the data passed by the parent component
- formFatherData is the son who renamed something passed by his father
- I’ll use this new name when my son uses it
- The type in formFatherData means that the son only needs the object data type
const son = {
template:"#son",
data() {
return {
name:'我是你儿子',
job:'coder'
}
},
props:{
formFatherData:{
type:Object
}
}
}
Son uses the data passed by Dad
- As you can see, the son did use his new name when he used it
<template id="son">
<div>
<h2>{
{
name}}</h2>
<p v-for="item in formFatherData">{
{
item}}</p>
</div>
</template>
The most important step
- Dad decided to pass something to his son
- Use son tags on Dad’s site, tag attributes cannot be named with camel case
- Asset is the data that father decides to pass to his son
<div id="father">
<h1>{
{
name}}</h1>
<son :form-father-data='asset'></son>
</div>
Look at the effect printed on the page
When the son uses Dad’s data, he can make a small request
- Basic type checking ('null' matches any type)
// 属性名:Number
car: String
// null 匹配任何类型
- Multiple possible types
// 属性名:[类型，类型]
car:[String,Number]
- The required value is true to indicate that the item is required
属性名:{
type:属性类型，
require：true
}
- Set default
属性名：{
type:属性类型，
default:值
}
- Object with default value, or when it is an array, the default value must be a function
属性名：{
type：Object,
default:function() {
return {
"key":"value" }
}
}
- The value passed in must be one of these
属性名:{
validator:function() {
return ['值1'，'值2'，'值3'].indexOf(value) !== -1
}
}
-
Custom type
先定义这个自定义类型
function 自定义类型名(形参) {
this.实参 = 形参
}
使用这个自定义类型
props:{
author:自定义类型名
}
Pass from son to father
- Pass through a custom event
or create a parent-child relationship first.
When the child component clicks the button, the parent component will show which button was clicked
<div id="father">
<h1>{
{
name}}</h1>
<son></son>
</div>
<template id="son">
<div>
<h2>{
{
name}}</h2>
<button v-for="(item,index) in btnlist">{
{
item.val}}</button>
</div>
</template>
const son = {
template:'#son',
data(){
return {
name:'我是儿子',
btnlist:[
{
id:1,val:'第一个'},
{
id:2,val:'第二个'},
{
id:3,val:'第三个'},
{
id:4,val:'第四个'}
]
}
},
}
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
},
components:{
son
}
})
- Take a look at the page effect
- Add a click event to the button on the son.
btnClick is the method called after clicking, and item is the parameter passed
<button v-for="(item,index) in btnList" @click='btnClick(item)'>{
{
item.val}}</button>
- Pass data to dad through $emit
- formSonData is the name of the custom event. Dad will listen to this event later
- item is the data passed to dad
- It's annoying that html tags don't support hump
const son = {
//.......
methods:{
btnClick(item) {
this.$emit('formsondata',item)
}
}
}
Father listens to the custom event that his son passes through. GiveMeData is the method called after the custom event is listened
to. The parameters are received and will be displayed on the span label.
<div id="father">
<h1>{
{
name}}</h1>
<span>{
{
sonDataId}}</span><span>{
{
sonDataVal}}</span>
<son @form-son-data='giveMeData'></son>
</div>
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
sonDataId:'',
sonDataVal:''
},
methods:{
giveMeData(item) {
console.log('我接收到参数了')
this.sonDataId = item.id
this.sonDataVal = item.name
}
}，
components:{
son
}
})
Look at the effect
