美文网首页
对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