对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>