自定义组件v-model传值方法

看下方注释,顺序为1=>10

javascript 复制代码
<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>
相关推荐
你别说话了2 小时前
Vue项目解决跨域
前端·javascript·vue.js
指尖时光.2 小时前
Three.js 超全入门综合案例
开发语言·javascript·ecmascript
唐青枫3 小时前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript
学习星球5 小时前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
YuJie7 小时前
JSBridge 基础知识
前端·javascript
默_笙7 小时前
🍕 后端接口还没写好,前端已经跑起来了?Mock 数据 + axios 接口层,前后端再也不互相"等"
前端·javascript
爱勇宝7 小时前
客户只想看个页面,我却做了一个静态演示发布系统
前端·javascript·后端
界面开发小八哥11 小时前
界面控件DevExpress Blazor v26.1新版亮点 - Navigation(导航)
javascript·.net·界面控件·blazor·devexpress·ui开发
aXin_ya11 小时前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
SendTomo12 小时前
send.wang(私传网)基于网页P2P直连传输大文件的优势
javascript·网络·webrtc·html5·p2p