vue2组件传参方法

一、父传子

1、$refs方法

 
<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>

 
<script>
export default {
  name: 'ChildView',
  data(){
    return{
      fatherHeight:''
    }
  },
  methods:{
    setHeight(height){
      this.fatherHeight = height
    }
  },
}
script>

2、props方法

 
<script>
import ChildView from '@/views/ChildPropsView.vue'
 
export default {
  name: 'FatherView',
  components: {
    ChildView
  },
  data(){
    return{
      height:'【未获取到身高】',
    }
  },
  methods:{
    setHeight(){
      this.height = '186'
    }
  },
}
script>

 
<script>
export default {
  name: 'ChildView',
  props:{
    fatherHeight:{
      type:String,
      default(){
        return '【未获取到身高】'
      }
    }
  },
}
script>

二、子传父

1、emit方法

 
<script>
import ChildView from '@/views/ChildEmitView.vue'
 
export default {
  name: 'FatherView',
  components: {
    ChildView
  },
  data(){
    return{
      height:'',
    }
  },
  methods:{
    getChildHeight(childHeight){
      this.height = childHeight
    }
  },
}
script>

 
<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