vue+element UI 使用model实现组件数据传值

子组件 myInput.vue

<template>

<div>

  <el-input v-bind="_attrs" v-on="$listeners" v-model="myValue" @input="inputChange"></el-input>

</div>

</template>

<script>

export default {

  name: 'MyInput',

  props: {

    value: { // 有值表示编辑，没值表示新增

      type: String

    }

  },

  data() {

    return {

      myValue:this.value

    }

  },

  model:{

    prop:'value',

    event:'change'

  },

  watch:{

    value(val){

      this.myValue = val

    }

  },

  computed: {

    // 一些未处理的参数或特殊处理的参数绑定到el-input上

    _attrs() {

      let attrs = { ...this.$attrs }

      return attrs

    }

  },

  methods: {

    inputChange(val){

      this.$emit('change',val)

    }

  }

}

</script>

<style lang="scss" scoped>

</style>

父组件调用

<my-input placeholder="请选择计划开运时间" v-model="myvalue"></my-input>