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