组件封装:
<template>
<div :class="{'inline':inline}">
<span v-if="this.label">{{this.label}}</span>
<input
type="text"
:value="value"
@input="$emit('input',$event.target.value)"
:placeholder="placeholder"
/>
</div>
</template>
<script>
export default {
props: {
label: String,
value: String,
placeholder: String,
inline: {
type: Boolean,
default: false
}
}
};
</script>
<style scoped>
.inline {
display: inline;
}
span {
margin-right: 10px;
}
</style>
使用组件:
<div>
<Input inline label="姓名" v-model="user" placeholder="username" @input="input"></FormBlock>
<button @click="submit">提交</button>
</div>
</template>
<script>
import Input from "./input.vue";
export default {
data() {
return {
user:""
};
},
methods: {
input(value){
console.log(value)
},
submit(){
console.log(this.user)
}
},
components:{
Input
}
};
</script>