Vue中父子组件双向绑定

最新推荐文章于 2025-03-23 07:30:00 发布

Kikyo--

最新推荐文章于 2025-03-23 07:30:00 发布

阅读量223

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_55803498/article/details/116240542

版权

本文详细介绍了如何使用Vue.js实现父子组件之间的双向绑定。通过实例展示了如何利用props进行父传子，以及如何通过自定义事件进行子传父，从而达到数据的双向同步更新。同时，讲解了在组件中使用input事件和v-model原理来监听和更新数据，确保父子组件间的交互顺畅。

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

父子双向绑定

<body>
    <div id="app">
        <cpn :number1='num1' :number2='num2' @num1change='num1change' @num2change='num2change'></cpn>
        // :number1='num1' :number2='num2' 利用父传子的原理将父组件的值传递给子组件 @num1change='num1change' @num2change='num2change'利用子传父的原理将子组件的值传递给父组件
    </div>
</body>
<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        // 父传子后number1的值 
        <h2>data:{{dnumber1}}</h2>
        //子组件中作为数据的dnumber1的值
        <input type="text" :value='dnumber1' @input='num1Input'>
        // 利用v-model原理进行双向绑定，将input中的value与dnumber1绑定 input事件由num1Input监听
        <h2>props:{{number2}}</h2>
        <h2>data:{{dnumber2}}</h2>
        <input type="text" :value='dnumber2' @input='num2Input'>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        //父组件
        el: "#app",
        data: {
            num1: 1,
            num2: 0
        },
        methods: {
            num1change(value) {
                this.num1 = parseInt(value)
            },
            //接收通过子组件发射函数传递的参数（由于input输入的值默认为string类型所以转换为number型）
            num2change(value) {
                this.num2 = parseInt(value)
            }
        },
        components: {
            //子组件
            cpn: {
                template: "#cpn",
                props: {
                    number1: Number,
                    number2: Number
                        //将number1,2定义为number型
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2
                    }
                    //在父传子完成后将number1,2的值作为数据存储至dnumber1,2中
                },
                methods: {
                    num1Input(event) {
                        this.dnumber1 = event.target.value;
                        this.$emit('num1change', this.dnumber1)
                    },
                    //将dnumber的值赋予input中同时同时监听数据的改变，通过子传父原理将改变后的数据传入父组件
                    num2Input(event) {
                        this.dnumber2 = event.target.value;
                        this.$emit('num2change', this.dnumber2)
                    },
                }
            }
        }
    })
</script>