[JavaScript知识库]vue:父子组件传递值的方法

封装好的组件常常作为子组件放在父组件中，为了该组件的通用性，不可避免地会有父组件把值传入子组件中，子组件返回值给父组件，下面介绍如何传递。

父组件把值传入子组件

父组件使用子组件bar的代码：rightType是要传递的值，注意要有“：”

 <bar
      :rightType="1"
    ></bar>

bar子组件的script部分代码:这里是script部分，将right type放在props里

export default {
  data() {},

  props: {
    rightType: {
      type: Number,
      required: false,
      default: 0,
    },
  },
};

bar子组件的部分结构代码：这里直接使用传入进来的rightType

<button v-if="rightType == 1"  >

子组件返回值给父组件

子组件某一方法：$emit将a传到getResult

  go(type) {
            let a =  res.message
            this.$emit('getResult',a)
    },

父组件使用子组件b的代码

<b
      ref="showCamera"
      @getCameraResult="getResult"
    ></b>

父组件的getResult方法

geResult(data){
       console.log（“子组件传递过来的数据”+data）
    }

补充 ：ref获取元素

上面b子组件有 ref=“showCamera”
使用this.$refs.showCamera可以获得b组件，再调用.showCameraDialog()，可以调用该组件的showCameraDialog()方法

this.$refs.showCamera.showCameraDialog()