前言:
简单做了一个查询的封装组件, 页面长这个样子
代码:
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>