父子组件传值形式
一. 使用v-model的方式(写法一)
在父组件中
<device-id-detail v-if="detialDialog" v-model="detialDialog" :currRecord="currRecord"></device-id-detail>
子组件中 只能使用value来接收v-model传递的数据 this.$emit('input', val) 通知父组件
props: {
value: {
type: Boolean,
default: false,
required: true
},
currRecord: {
type: Object,
default: () => {
return {}
}
},
data () {
return {
currentValue: this.value,
}
},
watch: {
value: { // 如果需要进入页面时获取数据 要使用immediate: true
immediate: true,
handler (val) {
this.currentValue = val
this.searchAct()
}
},
currentValue (val) { // 通知父组件
this.$emit('input', val)
}
},
二. 使用v-model的方式(写法二)
子组件
model: {
prop: 'testValue',
event: 'test'
},
props: ['testValue'],
this.$emit('test', val)
三. 使用.sync的方式
父组件 .sync
<supplyofgoods v-if="supplyofgoodsIsShow" :supplyofgoodsIsShow.sync="supplyofgoodsIsShow" :supplierObj='supplierObj'></supplyofgoods>
子组件 使用update:supplyofgoodsIsShow 通知父组件
this.$emit('update:supplyofgoodsIsShow', false)