Vue2：根据父组件的支持更改子组件的数据属性

Question

我的子组件中有一个模式窗口组件，当用户单击我的父组件中的按钮时，应该触发该窗口组件。我将触发道具传递给孩子，并将其分配给孩子组件中的data属性。但是当单击按钮时，它不会反映在数据属性中。 搜索后，我发现the case。但是我找不到解决我问题的方法。我尝试使用计算属性，但是将调用计算属性的set（）直到达到堆栈溢出！因此，请有人提供实现我目标的最佳方法：基于父组件的支持来更改子组件的数据属性

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>