一、父传子
1、$refs方法
<template>
<div class="father">
<h1>我是父亲</h1>
<button @click="getHeight">获取身高</button>
<ChildView ref="childRef"></ChildView>
</div>
</template>
<script>
import ChildView from '@/views/ChildView.vue'
export default {
name: 'FatherView',
components: {
ChildView
},
data(){
return{
height:'186',
}
},
methods:{
getHeight(){
this.$refs.childRef.setHeight(this.height)
}
},
}
</script>
<template>
<div class="child">
<h2>我是孩子，我爸爸的身高是{{ this.fatherHeight }}</h2>
</div>
</template>
<script>
export default {
name: 'ChildView',
data(){
return{
fatherHeight:''
}
},
methods:{
setHeight(height){
this.fatherHeight = height
}
},
}
</script>
2、props方法
<template>
<div class="father">
<h1>我是父亲</h1>
<button @click="setHeight">获取身高</button>
<ChildView :father-height="height"></ChildView>
</div>
</template>
<script>
import ChildView from '@/views/ChildPropsView.vue'
export default {
name: 'FatherView',
components: {
ChildView
},
data(){
return{
height:'【未获取到身高】',
}
},
methods:{
setHeight(){
this.height = '186'
}
},
}
</script>
<template>
<div class="child">
<h2>我是孩子，我爸爸的身高是{{ fatherHeight }}</h2>
</div>
</template>
<script>
export default {
name: 'ChildView',
props:{
fatherHeight:{
type:String,
default(){
return '【未获取到身高】'
}
}
},
}
</script>
二、子传父
1、emit方法
<template>
<div class="father">
<h1>我是父亲，我女儿的身高是{{ height }}</h1>
<ChildView @get-height="getChildHeight"></ChildView>
</div>
</template>
<script>
import ChildView from '@/views/ChildEmitView.vue'
export default {
name: 'FatherView',
components: {
ChildView
},
data(){
return{
height:'',
}
},
methods:{
getChildHeight(childHeight){
this.height = childHeight
}
},
}
</script><template>
<div class="child">
<h2>我是孩子</h2>
<button @click="setHeight">获取身高</button>
</div>
</template>
<script>
export default {
name: 'ChildView',
data(){
return{
height:'',
}
},
methods:{
setHeight(){
this.height = '120'
this.$emit('get-height',this.height)
}
},
}
</script>
更详细的方法步骤小伙伴们可以参考小编以下的文章