对input进行简单封装组件

2021-05-14  本文已影响0人  人生的旅行
<template>
  <input
    :type="inputType"
    :value="value"
    @input="$emit('inputChanged', $event.target.value)"
    :maxlength="maxlength"
    :placeholder="placeholder"
    :class="className">
</template>
<script>
export default {
  // 组件的名称
  name: 'input',
  // props 可以是数组或对象,用于接收来自父组件的数据
  props: {
    inputType: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    maxlength: {
      type: Number,
      default: 100
    },
    placeholder: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  },
  // 数据绑定
  data () {
    return {
    }
  },
  // 组件
  components: {},
  // 方法
  methods: { },
  // 计算属性
  computed: {},
  // 监听
  watch: {
    // 监听路由变化
  },
  created () {
  },
  // 完成挂载,相当于dom ready
  mounted () {
  },
  // 销毁,可以做一些定时器的销毁,缓存的清除等操作
  destroyed () {
  }
}
</script>

<style lang="scss" scope>
</style>
上一篇 下一篇

猜你喜欢

热点阅读