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" :sampleDevelopment @close="addMakeClose" />