vue2和vue3的一些技术点复习

二、vue2

1、vue2对已有组件二次封装，例如fes2 input 组件（文档链接）

子组件

<template><div class="keyboard-page"><wb-input:id="keyBoardId":placeholder="placeholder" :type="type" :disabled ='disabled'v-model="inValue":maxlength="maxlength":autocomplete="autocomplete"@on-focus="$emit('onKeyFocus')"@on-change="$emit('onKeyChange')"@on-enter="$emit('enterQuery')":slotType="slotType":slotValue="slotValue"><template v-if="slotType === 'TEXT' "><span :slot="slotLocation">{{slotValue}}</span></template></wb-input></div>
</template>
<script>
export default {name: 'input',model: {prop: "modelValue",event: "returnModel",},props: {placeholder: {type: String,default: '请输入' },type: {type: String,default: 'text'},disabled: {type: Boolean,default: false},modelValue: String | Array | Object | Boolean | Number,keyBoardId: {type: String,default: '',},maxlength: {type: Number},autocomplete: {type: String,default: '',},isSlot: {type: Boolean,default: false},slotLocation: {type: String,default: 'prepend',},slotType: {type: String,default: '',},slotValue: String | Array | Object | Boolean | Number,},computed: {inValue: {get: function () {return this.modelValue;},set: function (newValue) {this.$emit("returnModel", newValue);return newValue;},},},
}
</script>

父组件引入

<template><div class="page"><keyBoardInput :keyBoardId="'productSearchInfo'"@onKeyFocus="searchInputFocus"@onKeyChange="fuzzyMatching"@enterQuery="search"v-model="queryData.searchInfo"autocomplete="on" placeholder="请输入查询条件（支持产品编码/产品名称检索）"></keyBoardInput></div>
</template>
<script>
import keyBoardInput from "@/components/keyboard.vue";export default {name: 'About',components: {keyBoardInput,},data() {return {queryData: {searchInfo: ''} };},methods: {search() {console.log('enter 查询')},searchInputFocus() {console.log('获取焦点')},fuzzyMatching() {console.log('change')},},
};
</script>

2、插槽使用

参考此链接