组件间的双向绑定、如何自己定制双向绑定

最新推荐文章于 2025-06-30 15:07:46 发布

older-black

最新推荐文章于 2025-06-30 15:07:46 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48879122/article/details/126942298

本文介绍了Vue.js中如何实现组件的双向数据绑定，包括v-model的基本用法、组件间双向绑定的具体步骤，并提供了代码示例。

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

1.组件间的双向绑定

1.1 组件的双向绑定的介绍

由于vue中的单项数据流，一般来说，父组件通过自定义属性传输数据，子组件通过props字段接受数据，如果子组件想要更改父组件传过来的数据，可以通过this.emit()自定义事件，然后在子组件上绑定自定义事件，然后父组件通过自定义事件的函数中的参数拿到数据；

但是如果能将适用于input标签的v-model使用在子组件上，也就是将组件看作为一个input框，是不是就能如input一般实现数据的双向绑定呢？

双向绑定：v-model是绑定value属性和绑定input事件双向指令的语法，v-model其实就是通过绑定input事件,绑定value属性,在input事件里面把变化之后的值重新赋值给双向绑定的字段；

1.2 组件的双向绑定的适用步骤

1. 在子组件的标签上使用v-model绑定父组件要传输的数据；

2. 子组件在props使用value(默认)接受v-model绑定的数据;

3. 子组件在事件触发函数中使用this.emit()自定义事件，第二个参数直接传输更改后数据；

4. 在子标签对中添加自定义事件及事件执行函数，在函数中更改数据的值；

1.3 代码演示

<div id="app">
    <!-- 双向绑定：v-model是绑定value属性和绑定input事件双向指令的语法，v-model其实就是通过绑定input事件,
        绑定value属性,在input事件里面把变化之后的值重新赋值给双向绑定的字段
        -->
    <p>{{num1}}</p>
    <input type="text" v-model="num1">
    <input type="text" :value="num1" @input="num1=arguments[0].target.value">
    <hr>
    <!-- 组件双向绑定:让组件支持v-model指令,
        需要子组件接受value属性,并且在子组件添加事件发射,发射input事件 -->
    <!-- <com type="text" :value="num1" @input="fun"> -->
    <com type="text" :value="num1" @haa="num1=arguments[0]">
        <!-- <com v-model="num1"></com> -->
</div>

Vue.component('com', {
    template: `<div>{{value}}
        <button @click='add'>点击计算</button>
        </div>`,
    props: ['value'],
    methods: {
        add() {
            this.$emit('haa', this.value + 1)
        },
    },
})

new Vue({
    el: '#app',
    data: {
        num1: 10
    }, 
    methods: {
        fun(v) {
            console.log(arguments);
            this.num1 = v;
        }
    },
})

2.定制双向绑定

2.1 定制双向绑定

在子组件中的model中添加prop属性和event属性；prop属性值使自定义属性；event属性值使自定义事件；

2.2 代码演示

<div id="app">
        <com v-model="count"></com>
        <com :my-value="count" @myinput="count=arguments[0]"></com>
        {{count}}
</div>

Vue.component('com',{
    template:`<div><button @click='f1'>修改{{myValue}}</button></div>`,
    props:["myValue"],
    model:{
        // 可以在父子组件进行双向绑定的时候,自定义v-model的属性和事件名
        prop:"myValue", // 默认值是value
        event:"myInput", //默认的是input

    },
    methods: {                
        f1(){
            this.$emit('myinput',100)
        }
    },
    
})

new Vue({
    el:'#app',
    data:{
        count:12
    },
    methods:{
    
    },
})