vue子组件传值父组件，父组件传值子组件

方法一子组件传值给父组件：

this.$emit：子组件传值父组件

this.$refs:父组件传值子组件

子组件传值父组件

this.$emit('getOrderDetailsList',InventoryInfo.orderDetailsList)

父组件获取子组件的值

 <FormInfo ref="formInfo" @getOrderDetailsList="orderDetailsList" />

 

orderDetailsList(res){

      this.$refs['formSKUInfo'].setData(res);

　　this.data=res

    },

formSKUInfo：子组件接收的值

res:子组件传给父组件的值

方法二父组件传值给子组件,子组件传值给父组件：

父页面

data(){

　　return{

　　　　relationMaterialNameList:true

　　}

}

<editCost :tableData="tableData" @DraOpen1="getDraOpen1" :relationMaterialNameList="relationMaterialNameList"/>

getDraOpen1(data) {

        this.DraOpen1 = data

},

子页面

export default {

　　//props:{

　　　　//relationMaterialNameList:{

　　　　　//　type:String,//String,Array,Object　　　　　

　　　　//　　default:false

　　　//　}

　　//}

props:['relationMaterialNameList','tableData']

}

 

 

cancelFun() {

        this.$emit('DraOpen1', false)

 },

子组件生命周期mounted获取值打印

mounted() {
     let _this=this;
     let data=_this.relationMaterialNameList;
     console.log(data,999999);
   },
如果还是获取不到其它获取方法链接https://www.cnblogs.com/wssdx/p/12373645.html

方法三：通过ref获取子组件的方法传值：
父组件：

<!-- 详情页 -->

    <Drawer title="样衣详情" :closable="false" v-model="detailShow" width="75%">

      <detail ref = "detail"></detail>

  </Drawer>

 

// 样衣档案

  import Detail from './detail/index'

 

 

 // 详情

      jumpDetail(id) {

        this.detailShow=true

//获取子组件getInfo的方法并传值id

        this.$refs.detail.getInfo(id)

      },

子组件：

methods: {

//接收父组件的值并赋值给this.sampleDevelopmentId

    getInfo (sampleDevelopmentId) {

      this.sampleDevelopmentId=sampleDevelopmentId

}

}

 

方法四：watch监听获取父组件传的值

子组件：

 props: ['switch', 'makeList','sampleDevelopmentId'], 

  watch: {

    switch: {

      handler (val, oldVal) {

        this.modal = val;

      }

    },

    sampleDevelopmentId: {

      handler (val, oldVal) {

        this.sampleDevelopmentId = val;

      }

    }

  },

父组件

<AddMake :switch="addMakeSwitch" :makeList="makeList" :sampleDevelopmentId="sampleDevelopmentId" @close="addMakeClose" />