新建一个souso组件
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>
