Vue 封裝input 搜索組件

新建一個souso組件

<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: {                        //使input變為行內元素，默認false
      type: Boolean,
      default: false
    }
  }
};
</script>
<style scoped>
.inline {
  display: inline;
}
span {
  margin-right: 10px;
}
</style>

在頁面上調用

<template>
  <div>
 <souso inline v-model="user" placeholder="請輸入內容" @input="input"></souso>
   <button @click="submit">提交</button>
  </div>
</template>

<script>
import souso from './components/souso'
export default {
  name: "App",
  components: {
      souso
  },
  data() {
    return {
     user:'',
    };
  },
  methods:{
     input(value){
            console.log(value)
        },
        submit(){
            console.log(this.user)
        }
  }
};
</script>

<style lang="less">

</style>