vueコンポーネントパッケージ:簡単なinputコンポーネントをパッケージ

コンポーネントパッケージ:

<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
    }
};