vueコンポーネントパッケージ:簡単なinputコンポーネントをパッケージ
4465 ワード
コンポーネントパッケージ:
コンポーネントの使用:
<template>
<div :class="{'inline':inline}">
<span v-if="this.label">{{this.label}}</span>
<input
type="text"
:value="value"
@input="$emit('input',$event.target.value)" //( ) input
:placeholder="placeholder"
/>
</div>
</template>
<script>
export default {
props: {
label: String,
value: String,
placeholder: String,
inline: { // input , false
type: Boolean,
default: false
}
}
};
</script>
<style scoped>
.inline {
display: inline;
}
span {
margin-right: 10px;
}
</style>
コンポーネントの使用:
import Input from "./input.vue";
export default {
data() {
return {
user:""
};
},
methods: {
input(value){
console.log(value)
},
submit(){
console.log(this.user)
}
},
components:{
Input
}
};