vue 创建子组件(v-model .sync)

183 阅读1分钟

父子组件传值形式

一. 使用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)