vue2组件传参方法

一、父传子

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