vue - 搜索框组件的封装及使用

  在写一个项目的时候，我们在多个页面会使用到搜索功能，这时我们一般都会选择直接写一个组件给多个页面一起使用，下面我给大家分享一下我的组件封装，如果不妥之处，请多多指教！

1、子组件

<template>
        <div id="searchblock" class="searching">
            <div class="searchinput">
                <div class="iconblock">
                    <span class="iconfont icon-Fill"></span>
                </div>
                <div class="inputblock">
                    <form class="searchform" id="searchform" action="">
                        <input id="input" v-model="keywords" type="text" :placeholder="placeholder" autocomplete="off">
                    </form>
                </div>
            </div>
        </div>
    </template>
    <script type="text/javascript">
    	 //逻辑文件
    import {Icon} from 'vux';
    import {XInput} from 'vux';
    import Jquery from "../../../static/js/jquery-3.3.1.min";
    
    export default {
        name: '',
        data() {
            return {
                placeholder: '请输入关键字',
                keywords: '',
            }
        },
        components: {
            Icon,
            XInput
        },
        props: {
            text: String,
            value: String,
        },
        methods: {
            submit() {
                let _this = this;
                let keywords = ''
                Jquery('#searchform').on('submit', function () {
                    return false;
                });
    
                //监听回车
                Jquery('#input').keydown(function (event) {
                    console.log('键盘keycode', event.keyCode);
                    if (event.keyCode == 13) {
                        var input = document.getElementById("input");
                        input.blur();  // 按回车键时将键盘隐藏
                        keywords = (_this.keywords);
                        // keywords=_this.keywords;
                        console.log('提交搜索====>', keywords);
                        if (!keywords || keywords == undefined) {
                            keywords = '';
                        }
                        _this.$emit('submit', keywords);
                    }
                });
            },
        },
        watch: {
            value(val, oldval) {
                console.log('value========>', this.value, this.keywords)
                this.keywords = this.value;
            },
            text(val, oldval) {
                this.placeholder = this.text;
            }
        },
        mounted() {
            if (this.text) {
                this.placeholder = this.text;
            }
            this.keywords = this.value;
            this.submit();
            let div = ['searchblock'];
            let height = sser.adapter(div);  // 获取搜索框的高度
            console.log('height searchblock', height)
            this.$emit('height', height);
        }
    }
	</script>
    <style lang="less" scoped>
        @import './style.css';
    </style>

2、使用子组件的父组件

    <Searching  :value="strQuery"  :text="placeholder"  @submit="submit"  @height="getsearch"></Searching>
    import Searching from '../../components/searching/index.vue';
    export default {
      name: 'home',
	      data() {
		        return {
		    		strQuery:'',
		    		placeholder:'',
		     	}  
	     	},
	     	components:{
	    		Searching 
	    	},
	    	methods:{
	    		submit(value) {
			      this.strQuery = value;
			      // 处理相应的搜索逻辑
			      console.log(value);
			    },
	    		getsearch(value) { //获取搜索框的高度
			      	this.heighting['search'] = value;
			    }
			}
    }