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>

使用组件：

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