美文网首页
对input进行简单封装组件

对input进行简单封装组件

作者: 人生的旅行 | 来源:发表于2021-05-14 13:44 被阅读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>

相关文章

网友评论

      本文标题:对input进行简单封装组件

      本文链接:https://www.haomeiwen.com/subject/hxjqjltx.html