这是父页面
<template>
<view>
{{ JSON.stringify(formData) }}
<SearchCollapse class="search-box" @reset="resetForm">
<template v-slot:content>
<input v-model="formData.name" class="search-input" placeholder="请输入" />
</template>
</SearchCollapse>
</view>
</template>
<script>
import SearchCollapse from '@/components/search-collapse/search-collapse.vue'
export default {
components: {
SearchCollapse,
},
data() {
return {
formData: {
name: "", // 初始化 formData 的默认值
},
};
},
methods: {
resetForm() {
console.log('resetForm');
this.formData.name = ""; // 重置输入框的值
},
},
};
</script>
这是 SearchCollapse 组件
<template>
<view>
<slot name="content" :reset="reset"></slot>
<button @click="reset">重置</button>
</view>
</template>
<script>
export default {
methods: {
reset() {
console.log('reset');
this.$emit("reset"); // 向父组件发送重置事件
},
},
};
</script>
