Vue组件间传值 v-model

本文深入探讨了Vue.js框架中v-model指令的工作原理及其在组件间双向数据绑定的应用。v-model本质上是语法糖,简化了属性绑定和事件监听的过程,使开发者能够更便捷地在表单元素和组件中实现数据的双向绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用过Vue的同学应该都了解组件之间传值

父组件 --> 子组件 : props

子组件 --> 父组件 : 事件

其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model

我们都在表单中使用过 v-model 来绑定数据,其实组件之间也是可以用 v-model 进行双向绑定的

我们来了解一下 v-model 的原因

<input type="text" v-model="message" />
<!--其实上面这种写法只是一个语法糖,本质如下-->
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value" />

由此看出 v-model 的本质就是绑定一个属性和事件

因此在组件中可以这样使用

<!--html-->
<my-component v-model="message"></my-component>

<!--JS-->
Vue.component('my-component',{
    template: `<select @change="changeSelect()" ref="selector">
                    <option value="0">javascript</option>
                    <option value="1">PHP</option>
                    <option value="2">C#</option>
                </select>`,
    props:['value'],
    methods: {
        changeSelect(){
            this.$emit('input',this.$refs.selector.value)
        }
    }
})

var app = new Vue({
    el : '#app',
    data(){
        return {
            message : 1
        }
    }
})

 

转载于:https://www.cnblogs.com/xiaoliwang/p/9737977.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值