Vue封装双向数据绑定组件、对象传参

1. 使用v-bind 对象传参
2. v-model 传参
3. v-bind:xxx.sync双向绑定传参

<template>
  <div>
    <div>{{proxy.value}}</div>
    <h4>{{age}}</h4>
    <h3>{{modelProp}}</h3>
    <h2>{{syncProp}}</h2>
    <el-button @click="handleClick">提 交</el-button>
  </div>
</template>

<script>
export default {
  name: 'inputSelf',
  model: {
    prop: 'modelProp',
    event: 'update:modelProp',
  },
  props: {
    // v-bind传参
    age: {
      default: '',
      required: true,
    },
    // v-model传参，与 model.prop对应，默认value
    modelProp: {
      default: '',
      required: true,
    },
    // v-bind:xxx.sync传参
    syncProp: {
      default: '',
      required: true,
    },
  },
  data () {
    return {
      proxy: {
        name: 'text',
        value: 'self-Com',
      },
      valueData: 10,
    }
  },
  created () {
    console.log(this)
  },
  methods: {
    handleClick () {
      // $emit中事件名称与model中event相对应，
      this.$emit('update:modelProp', this.valueData++)
      this.$emit('update:syncProp', this.valueData++)
    },
    // function transformModel (options, data: any) {
    //   const prop = (options.model && options.model.prop) || 'value' //子组件不存在options.model，默认给value
    //   const event = (options.model && options.model.event) || 'input'//event="input"
    //   ;(data.attrs || (data.attrs = {}))[prop] = data.model.value
    //   const on = data.on || (data.on = {})
    //   const existing = on[event]  //undefined
    //   const callback = data.model.callback  //f()
    //   if (isDef(existing)) {  //false
    //     if (
    //       Array.isArray(existing)
    //         ? existing.indexOf(callback) === -1
    //         : existing !== callback
    //     ) {
    //       on[event] = [callback].concat(existing)
    //     }
    //   } else {
    //     on[event] = callback  //把回调赋值给监听的函数
    //   }
    // },
  },
}
</script>

父组件使用

<input-self v-bind="selfConfig" v-model="pageSize" :syncProp.sync="pageNo"></input-self>