Vue修改组件数据同时父组件数据一起改变的解决办法

最新推荐文章于 2023-10-13 10:04:54 发布

小仓桑

最新推荐文章于 2023-10-13 10:04:54 发布

阅读量489

点赞数

分类专栏： HTML VUE 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_43462019/article/details/113796143

版权

HTML 同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

VUE

16 篇文章 0 订阅

订阅专栏

这段代码展示了Vue中父子组件的数据通信。`<cpn>`组件通过props接收`num1`和`num2`，并用`v-model`的替代方案（`:value`和`@input`）更新数据。当输入值改变时，组件通过`$emit`触发父组件的方法，更新父组件的状态。

摘要由CSDN通过智能技术生成

HTML代码：

<body>
<div id="app">
    <cpn :number1="num1"
         :number2="num2"
         @numinput1change="numinput1changes"
         @numinput2change="numinput2changes"></cpn>
</div>
</body>
<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>data:{{dnumber1}}</h2>
        <!--        <input type="text" v-model="dnumber1">-->
        <input type="text" :value="dnumber1" @input="numInput1">
        <h2>props:{{number2}}</h2>
        <h2>data:{{dnumber2}}</h2>
        <!--        <input type="text" v-model="dnumber2">-->
        <input type="text" :value="dnumber2" @input="numInput2">
    </div>
</template>

JavaScript代码：

const app = new Vue({
        el: '#app',
        data: {
            num1: 1,
            num2: 0
        },
        components: {
            cpn: {
                template: '#cpn',
                props: {
                    number1: Number,
                    number2: Number
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2
                    }
                },
                methods: {
                    numInput1(event) {
                        this.dnumber1 = event.target.value
                        this.$emit('numinput1change', this.dnumber1)
                    },
                    numInput2(event) {
                        this.dnumber2 = event.target.value
                        this.$emit('numinput2change', this.dnumber2)
                    }
                }
            }
        },
        methods: {
            numinput1changes(value) {
                this.num1 = parseInt(value)
            },
            numinput2changes(value) {
                this.num2 = value * 1
            }
        }
    })