Vue2: изменение свойства данных дочернего компонента на основе реквизита родительского компонента

Question

У меня есть компонент модального окна в моем дочернем компоненте, который должен запускаться, когда пользователь нажимает кнопку в моем родительском компоненте. Я передаю триггерную подпорку дочернему элементу и назначаю его свойству data в дочернем компоненте. Но при нажатии кнопки это не отражается в свойстве данных. После поиска немного нашел чехол . Но я не смог найти решение своей проблемы. Я пытался с вычисленными свойствами, но 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>