VUE 封装的下拉组件 父组件清空子组件如何消失
时间: 2023-08-18 12:15:16 浏览: 92
在 Vue 中,父组件要清空子组件,可以通过修改一个控制下拉组件是否显示的变量来实现。具体实现方式如下:
1. 在父组件中定义一个变量,用于控制下拉组件是否显示:
```javascript
data() {
return {
showDropdown: false
}
}
```
2. 将这个变量作为 prop 传递给下拉组件:
```html
<Dropdown :show="showDropdown"></Dropdown>
```
3. 在下拉组件中,使用这个 prop 控制下拉框的显示和隐藏:
```html
<template>
<div v-if="show">
<!-- 下拉框内容 -->
</div>
</template>
<script>
export default {
props: {
show: Boolean
}
}
</script>
```
4. 当父组件需要清空子组件时,修改控制下拉组件显示的变量:
```javascript
this.showDropdown = false;
```
这样,当控制下拉组件显示的变量为 false 时,下拉组件就会被隐藏。
相关问题
vue3组件封装之el-select搜索组件的封装,里面有下拉框
Vue3 中组件的封装相比 Vue2 有了很大的改进,可以使用 Composition API 来进行组件的编写,下面是一个使用 Vue3 Composition API 封装的带有搜索功能的 el-select 组件的示例:
```vue
<template>
<el-select
v-model="selectedValue"
filterable
remote
:remote-method="search"
:loading="isLoading"
:loading-text="loadingText"
:no-match-text="noMatchText"
:popper-append-to-body="false"
:popover-class="popoverClass"
:debounce="debounce"
:placeholder="placeholder"
:clearable="clearable"
:disabled="disabled"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
name: 'ElSelectSearch',
props: {
// 下拉选项列表,格式为 [{ label: '选项1', value: 'value1' }, ...]
options: {
type: Array,
default: () => []
},
// 是否可清空
clearable: {
type: Boolean,
default: false
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否显示搜索框
filterable: {
type: Boolean,
default: true
},
// 下拉框的 class
popoverClass: {
type: String,
default: ''
},
// 搜索框 placeholder
placeholder: {
type: String,
default: '请输入搜索内容'
},
// 输入搜索内容后,触发搜索的延迟时间
debounce: {
type: Number,
default: 300
},
// 搜索中的 loading 文本
loadingText: {
type: String,
default: '加载中...'
},
// 没有匹配项的文本
noMatchText: {
type: String,
default: '没有匹配的数据'
},
// 是否正在加载中
isLoading: {
type: Boolean,
default: false
}
},
setup(props, { emit }) {
const state = reactive({
selectedValue: '',
searchValue: '',
searchTimer: null
})
// 监听选中的值变化
const handleSelectChange = (value) => {
state.selectedValue = value
emit('change', value)
}
// 监听搜索框输入的值变化
const handleSearchValueChange = (value) => {
state.searchValue = value
if (state.searchTimer) {
clearTimeout(state.searchTimer)
}
state.searchTimer = setTimeout(() => {
emit('search', value)
}, props.debounce)
}
// 执行搜索的方法
const search = (query) => {
emit('search', query)
}
// 将响应式数据转化为 ref
const refs = toRefs(state)
return {
...refs,
handleSelectChange,
handleSearchValueChange,
search
}
}
}
</script>
```
这里我们使用了 `reactive` 和 `toRefs` 来创建响应式数据,并将其转化为 ref,方便在模板中使用。同时,我们也使用了 Vue3 的两个新的钩子函数 `setup` 和 `emit`。其中,`setup` 钩子函数用来替代 Vue2 中的 `beforeCreate` 和 `created` 钩子函数,用于组件的初始化和响应式数据的创建。`emit` 函数用于向父组件派发事件。在 `setup` 函数中,我们将响应式数据和方法都返回给模板使用。
该组件支持以下 props:
- `options`:下拉选项列表,格式为 `[{ label: '选项1', value: 'value1' }, ...]`。
- `clearable`:是否可清空。
- `disabled`:是否禁用。
- `filterable`:是否显示搜索框。
- `popoverClass`:下拉框的 class。
- `placeholder`:搜索框 placeholder。
- `debounce`:输入搜索内容后,触发搜索的延迟时间。
- `loadingText`:搜索中的 loading 文本。
- `noMatchText`:没有匹配项的文本。
- `isLoading`:是否正在加载中。
该组件支持以下事件:
- `change`:选中的值变化时触发。
- `search`:搜索框输入内容变化或者点击下拉框时触发。
该组件中的搜索功能使用了 ElementUI 的远程搜索,可以在 `search` 方法中进行异步搜索。需要注意的是,在使用远程搜索时,需要设置 `remote` 和 `:remote-method` 属性。`remote` 表示是否使用远程搜索,`:remote-method` 表示远程搜索的方法。
同时,我们也使用了 ElementUI 的 `el-option` 组件来显示下拉选项列表,使用 `v-for` 来遍历 `options` 数组中的每一个元素,并将其显示在下拉选项列表中。`el-select` 组件的 `v-model` 双向绑定 `selectedValue` 变量,当选中的值发生变化时,会触发 `handleSelectChange` 方法。
最后,我们将响应式数据和方法都返回给模板使用,模板中可以直接使用它们来进行渲染和交互。
阅读全文