Vue 封装input 搜索组件

 1 <template>
 2   <div :class="{‘inline‘:inline}">
 3     <span v-if="this.label">{{this.label}}</span>
 4     <input
 5       type="text"
 6       :value="value"
 7       @input="$emit(‘input‘,$event.target.value)"    
 8       :placeholder="placeholder"
 9     />
10   </div>
11 </template>
12 <script>
13 export default {
14   props: {
15     label: String,
16     value: String,
17     placeholder: String,
18     inline: {                        //使input变为行内元素，默认false
19       type: Boolean,
20       default: false
21     }
22   }
23 };
24 </script>
25 <style scoped>
26 .inline {
27   display: inline;
28 }
29 span {
30   margin-right: 10px;
31 }
32 </style>

 1 <template>
 2   <div>
 3  <souso inline v-model="user" placeholder="请输入内容" @input="input"></souso>
 4    <button @click="submit">提交</button>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import souso from ‘./components/souso‘
10 export default {
11   name: "App",
12   components: {
13       souso
14   },
15   data() {
16     return {
17      user:‘‘,
18     };
19   },
20   methods:{
21      input(value){
22             console.log(value)
23         },
24         submit(){
25             console.log(this.user)
26         }
27   }
28 };
29 </script>
30 
31 <style lang="less">
32 
33 </style>