在封装 全局组件时 遇到的问题 Vue3

前言:
简单做了一个查询的封装组件, 页面长这个样子

代码:

1.在公共组件的文件中创建了一个叫Search.vue的文件
<template>
  <div>
    <van-search v-model="searchVal" show-action :placeholder="placeholder">
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
  </div>
</template>
<script setup name="Search">
// 必须先声明
const emit = defineEmits();
const props = defineProps({
    
    
  placeholder: {
    
    
    type: String,
    default: "请输入",
  },
});
const searchVal = ref('');
function onClickButton() {
    
    
 emit("getSearchVal", searchVal.value)
}
defineExpose({
    
     onClickButton})

// 将子组件的方法暴露给父组件
</script>

2. components文件下新增index.js (这么写 方便以后有更多的公共组件, 统一维护在此文件夹)
用来引入上边创建的Search.vue文件
import Search from "./Search.vue";
export default {
    
    
  install(app) {
    
    
    app.component(Search.name, Search);
  },
};

3.上述的文件结果是这样子的

4.在main.js中引入在(2)步骤下的index.js文件

(也可以在mian.js文件中直接引入, 这里考虑到日后可能还会有其他的公共组件, 所以写在了index.js中,看起来不会乱~)
import components from "@/components"; // 公共组件
app.use(components)

以上一个全局可用的组件创建完成
在需要的文件中引入就行

 <search ref="searchRef" @getSearchVal="getSearchVal" placeholder="请输入人员姓名或工号"></search>
<script setup name="AddPeople">
const searchRef = ref(null);
function getSearchVal(val) {
    
    
  console.log(val, 'search组件中的值');
}
</script>