一、父传子

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>

更详细的方法步骤小伙伴们可以参考小编以下的文章

Vue基础语法（四）_vue button click-CSDN博客文章浏览阅读650次。父组件向子组件通信（数据传递），子组件向父组件通信，父组件访问子组件，子组件访问父组件_vue button clickhttps://blog.csdn.net/qq_51478745/article/details/127495034