Vue中关于子组件通过双向绑定时，利用props修改父组件中数据报错问题

最新推荐文章于 2024-06-22 13:12:48 发布

原创最新推荐文章于 2024-06-22 13:12:48 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍Vue中子组件如何正确地修改父组件的数据，避免直接修改props属性导致的错误，并提供通过自定义事件与v-model原理实现双向绑定的具体步骤。

Vue中关于子组件通过双向绑定时，利用props修改父组件中数据报错问题

在官方文档中，不允许子组件直接通过双向绑定，修改props属性中的值，若要修改，则会报错
解决方法：

因为子组件的props属性绑定的是父组件中的data，当子组件直接通过双向绑定（props）来修改值时，相当于通过该属性直接修改了父组件中的data，该做法是不允许的
因此实现双向绑定时，还是需要绑定data属性中的值：即首先将父组件的data值传给子组件中props的属性，然后在子组件中声明data属性，用props属性中的值初始化data中的数据
但是此时还是只实现了input输入框改变子组件中的data值，那么如何使父组件中的data值也发生改变呢（即实现通过子组件修改父组件中的数据）？
在子组件中直接使用v-model绑定的是子组件中的data，还是无法改变父组件中的data，因此不能直接使用v-model，这里利用v-model的原理
分两步：
第一步：在子组件使用：value绑定子组件中的data
第二步：在子组件中，绑定input事件，在子组件中定义事件，将子组件data中的值通过event.target.value改变，在将改变后的值通过$emit传递给父组件

在父组件中定义事件，用父组件中的data来接收子组件中的data，从而实现子组件改变父组件中的data

效果：

代码部分：

<div id="app">
       <child-cpn :num1="num1" :num2="num2"
        @fchange1="fchange1" @fchange2="fchange2"></child-cpn>
    </div>
    <template id="childCpn">
        <div>
            <!-- props中的内容发生改变，即父组件中的data要发生改变 -->
            <h4>props:{{num1}}</h4>
            <h4>data:{{dnum1}}</h4>
           <input type="text"  :value="dnum1" @input="change1">
            <h4>props:{{num2}}</h4>
            <h4>data: {{dnum2}}</h4>
           <input type="text"  :value="dnum2" @input="change2">
        </div>
    </template>
    <script>
        const childCpn = {
            template: "#childCpn",
            methods: {
            },
            props: {
                num1: Number,
                num2: Number
            },
            data() {
                return {
                    dnum1: this.num1,
                    dnum2: this.num2
                }
            },
            methods: {
                change1(event) {
                    this.dnum1 = event.target.value;
                    this.$emit('fchange1', this.dnum1)
                },
                change2(event) {
                    this.dnum2 = event.target.value;
                    this.$emit('fchange2', this.dnum2)
                }
            }
        }
        const app = new Vue({
            el: "#app",
            components: {
                childCpn
            },
            data: {
                num1: 1,
                num2: 2
            },
            methods: {
                fchange1(data) {
                    data = parseInt(data);
                    this.num1 = data;
                },
                fchange2(data) {
                    data = parseInt(data);
                    this.num2 = data;
                }
            }
            
        })
    </script>