javascript - Vue2：根据父组件的道具更改子组件的数据属性

Question

我的子组件中有一个模态窗口组件，当用户单击父组件中的按钮时应该触发它。我将触发道具传递给孩子并将其分配给子组件中的数据属性。但是当单击按钮时，它不会反映在数据属性中。经过一番搜索，我找到了这个案例。但我找不到我的问题的解决方案。我尝试使用计算属性，但计算属性的 set() 被调用，直到它达到堆栈溢出！所以请有人提供实现我目标的最佳方法：根据父组件的道具更改子组件的数据属性

标签： javascriptvue.jsvue-componenttwo-way-binding

Answer 1

您可以尝试使用以下代码。

//parent.vue
<template>
    <div class="component">
        <p>Ten toi la {{ name }}</p>
        <p>Toi nam nay {{ age }} tuoi</p>
        <button @click="resetAge">Reset tuoi</button>
        <hr>

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-6">
                <app-user-detail :age="age" @ageWasUpdated="age = $event"></app-user-detail>
            </div>
        </div>
    </div>
</template>
<script>
    import Child from './Child.vue';
    export default {
        data: function () {
            return {
                name: 'Duy',
                age: 23,
                todo:[
                    {
                        name:'A',
                        age:12
                    },
                     {
                        name:'B',
                        age:13
                    },
                     {
                        name:'C',
                        age:14
                    }
                ]
            };
        },

        components: {
            appUserDetail: Child,
        },
        methods: {
            resetAge () {
                this.age = 23
            }
        }
    }
</script>
//child.vue
<template>
    <div class="component">
        <h3>User Details</h3>
        <p>Tuoi toi:{{age}}</p>
        <button v-on:click="changeAge">Doi tuoi</button>
    </div>
</template>
<script>
	export default {
		props: ['age'],
		methods: {
		    changeAge () {
		        this.age = 24;
		        this.$emit('ageWasUpdated', this.age)
		    }
		}
	}
</script>