二次封装

带有input组件，解决双向绑定v-model（先理解v-model原理）

说明： 封装组件使其可以使用v-model双向绑定。
    以vantdesign的date-picker时间组件为例：使用v-model传时间值过去(str格式),通过配置的model—prop中的value接收。此时接受的str的值可以赋值给momVal(转换成Moment格式)。一触发change就会将新的str传递到父组件的v-model中，此时prop接收的value也变化了，momVal也要相应变化（可以通过watch中进行监听，v-model传递的value值一变，momVal也相应变化）

  model: {
    prop: 'value',
    event: 'change'
  },
  
  props: {
    value: {
      type: String,
      default: '',
      required: false
    } 
  }
  

  data() {
    // value为传递过来的v-model中的值，prop接受了，需要赋值给value
    const dateStr = this.value
    return {
      decorator: '',
      // 格式为组件所需的moment格式
      momVal: !dateStr ? null : moment(dateStr, this.format)
    }
  },
  watch: {
    // 触发change，v-model的值变，即传过来的value变化
    // value的值要包装一下变为moment格式，随时赋值给momVal
    value(val) {
      if (!val) {
        this.momVal = null
      } else {
        this.momVal = moment(val, this.format)
      }
    }
  },
  methods: {
    moment,
    change(mom, dateStr) {
      // 传递过去的v-model的值格式为str时间格式（2020-09-09）
      this.$emit('change', dateStr)
    },
    openChange(status) {
      this.$emit('openChange', status)
    }
  }

draggable半成品（涉及父子传值）

：不能直接用，需要再次封装，表格的表头自己根据情况写。 保存时发送的请求根据情况写。都需要进行更改（小小白，class的样式有用到vant design表格table中的css样式）

使用：

 // 调整顺序
    sortNormalFunction() {
      this.sortvisible = true
    },
    refreshTableData() {
      // 重新获取页面表格数据
      this.getNormalFunctionData()
      this.sortvisible = false
    },
    calcelSortDialog() {
      this.sortvisible = false
    },

总结：实际上是父子之间的传值。
注意：父给子传的值（props接收的数据）在子组件中不要改变
解决方法：可以通过计算属性computed进行子传父变化this.$emit(“事件名”)）