看下方注释，顺序为1=>10
<template>
<!-- v-model怎么实现父子组件传值 -->
<!-- 子组件：
1.在子组件中，我们要在内部进行绑定v-model="innerValue" -->
<el-select v-model="innerValue" filterable remote reserve-keyword :placeholder="placeholder" @change="changeValue"
:remote-method="searchStudent" :loading="loading" style="width: 240px">
<el-option v-for="item in studentList" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.id }}</span>
</el-option>
<template #loading>
<svg class="circular" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" />
</svg>
</template>
</el-select>
</template>
<script>
import { values } from 'min-dash'
import { listStudents, submitOrder } from '@/api/acd/students'
export default {
name: "search",
props: {
placeholder: {
type: String,
default: "请输入值"
},
// 定义内部用于双向绑定的变量，中间值
value: {
type: [Number,String],
default: ""
},
searchMethod: {
type: Function,
default: () => { }
}
},
created() {
// 4.在调用子组件之前，将父组件传入的v-model的值value赋值给innerValue
this.innerValue = this.value
},
watch: {
// 3.监听父组件传入的v-model的值value的变化，将起变化后value的值实时赋值给innerValue
value: {
handler(val) {
this.innerValue = val
}
}
},
data() {
return {
// 2. 双向绑定v-model
innerValue: null,
test: "测试",
list: [],
options: [],
// value: '',
loading: false,
studentList: [],
// placeholder: "请"
}
},
methods: {
// 5.最后，将子组件下拉框中选中的值实时赋值给父组件传入的v-model的值value
changeValue(val) {
this.$emit('input', val);
},
searchStudent(s) {
if (s) {
this.loading = true;
clearTimeout(this.timer); // 清除之前的定时器
this.timer = setTimeout(() => {
// 在延迟后执行你的操作
// 调用searchMethod方法，并传入参数s
// 这里不要忘记加this，否则this指向会出问题
this.searchMethod({ name: s }).then(response => {
this.loading = false;
this.studentList = response.rows;
})
}, 500); // 设置延迟时间，单位为毫秒
}
},
}
}
</script>
