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

看下方注释,顺序为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>

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue3中,父子组件间v-model传值的方式和Vue2相比有所改变,可通过在子组件中使用“emit”自定义一个名为“update:modelValue”的事件,然后在父组件中使用v-model来绑定这个事件的参数值即可。如下所示: 子组件代码: ```vue <template> <div> <input type="text" :value="modelValue" @input="handleInput"> </div> </template> <script> export default { props: { modelValue: String }, methods: { handleInput(e) { this.$emit('update:modelValue', e.target.value) } } } </script> ``` 父组件代码: ```vue <template> <div> <ChildComponent v-model="name"></ChildComponent> <p>{{ name }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { name: '' } } } </script> ``` 父组件中使用v-model绑定的“name”变量会作为子组件emit的参数,实现父子组件间的数据双向绑定。 ### 回答2: vue3中,父子组件如何传递数据一直都是热门问题之一,尤其是在使用v-model时,如何正确传递数据就更为重要。在vue3中,父子组件通过v-model传递数据的方式有所变化,下面将详细阐述vue3父子组件v-model传值的方式。 1、子组件使用v-bind绑定value属性: 子组件实现v-model的关键是将输入框的值value属性绑定到子组件实例的一个属性上,同时监听输入框的输入事件,实时更新该属性。 代码如下: ``` <template> <input :value="val" @input="updateVal"> </template> <script> export default { props: { value: String }, setup(props, { emit }) { const val = Vue.ref(props.value) const updateVal = (e) => { val.value = e.target.value emit('update:value', val.value) } Vue.watch(() => props.value, (val) => { val.value = val }) return { val, updateVal } } } </script> ``` 上述代码中,我们通过setup方法来定义子组件的逻辑部分,通过props参数接收父组件传递的value值;然后定义一个ref类型的val属性,用来存储输入框的值,并且通过watch监听value值的变化,当父组件传递的value值变化时,同步更新val值。 接着,我们通过updateVal方法来实时更新val值,并通过emit方法触发update事件,将子组件更新后的值传递给父组件。 2、父组件使用v-model绑定子组件: 在父组件中,我们可以使用v-model来绑定子组件,并传递数据。 代码如下: ``` <template> <Child v-model="msg"></Child> </template> <script> import Child from './child.vue' export default { components: { Child }, data() { return { msg: 'hello' } } } </script> ``` 在上述代码中,我们引入了子组件Child,并通过v-model绑定msg属性,这样就完成了父子组件的数据双向绑定。 需要注意的是,父组件中通过v-model绑定的属性名应该与子组件中接收的属性名一致,例如上述代码中,Child组件中接收的属性名为value,那么在父组件中绑定时也应该使用value。 以上便是vue3中父子组件v-model传值的方式,通过以上的实现,我们即可实现数据双向绑定。同时,需要注意代码的规范性,遵循vue3的开发规范,可提高代码的可读性和可维护性。 ### 回答3: Vue3中的父子组件v-model传值是一种方便且实用的传值方式。V-model指令是一种语法糖,它将组件的props和自定义事件结合在一起,可以让父组件很方便地管理一个子组件的状态,并将子组件的值传递回来。 父组件可以使用v-model指令来管理子组件的值,格式为v-model="propName",其中propName是子组件中接收父组件值的prop属性名。在子组件中,我们需要使用$emit方法来触发一个自定义事件,将子组件值传递给父组件。自定义事件的名称应该和prop属性名称以及“update:”一起拼接成一个字符串,如“update:propName”。 下面是一个简单的实例: 在父组件中,我们定义一个名为“parentValue”的数据,通过父子组件传值的方式将这个数据传递给子组件: ``` <template> <div> <p>父组件值:{{ parentValue }}</p> <child-component v-model="parentValue"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentValue: '' } }, components: { ChildComponent } } </script> ``` 在子组件中,我们定义一个名为“value”的prop属性接收父组件传过来的值,并在输入框中使用v-model指令绑定该值。当输入框的值发生变化时,我们通过$emit方法触发一个自定义事件“update:value”,将最新的值传递给父组件: ``` <template> <div> <p>子组件值:{{ value }}</p> <input type="text" v-model="value"> </div> </template> <script> export default { props: { value: { type: String, default: '' } }, methods: { updateValue(newValue) { this.$emit('update:value', newValue); } }, watch: { value(newValue) { this.updateValue(newValue); } } } </script> ``` 需要注意的是,子组件中使用watch监控value值的变化,并在变化时触发updateValue方法,因为在输入框中使用v-model指令绑定的是子组件中的值,无法直接触发父组件的更新。 最后,父组件的parentValue值将会通过v-model指令传递给子组件,并且子组件的更新值会通过自定义事件“update:value”传递回父组件,完成了父子组件v-model传值的双向数据绑定。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值