Блог

Здесь родительский метод передает name amp; age реквизиты дочернему. Дочерний компонент генерирует пользовательское событие, changeAgeFn которое передает свой changeAge метод родительскому.

В родительском (переданном) changeAge событии прикреплено событие click on button[change age] .

Однако этот способ не работает. Я хотел бы знать стандартный / рекомендуемый способ выполнения дочернего события из родительского.

Parent.vue

 <template>
    <div class="parent-wrap">
        <p>UserName: {{user}}, age: {{age}}
        <button @click="changeAge()"> Change Age</button></p>
        <child :user="user" :age="age" @userChanged="user = $event" @changeAgeFn="$event" ></child>
    </div>
</template>

<script>
    import child from './child.vue'

    export default {
        data: function() {
            return {
                user: 'John',
                age: 35
            }
        },
        components: {
            child
        },        
    }
</script>

<style>
.child-wrap {
  border: 3px solid #000;
  max-width: 300px;
  padding: 20px;
  background: lightblue;
}

.parent-wrap {
  padding: 30px;
  background-color: lightcoral;
  border: 3px solid #000;
}
</style>
  

дочерний.vue

 <template>
    <div class="child-wrap">
        <p>UserName: {{user}}, age: {{age}}
        <button @click="changeName"> Change Name</button></p>
    </div>
</template> 

<script>
    export default {
        props: ['user', 'age'],
        methods: {
            changeName() {
                this.user = 'Rahul'
                this.$emit('userChanged', this.user)
                this.$emit('changeAgeFn', this.changeAge)
            },
            changeAge() {
                this.age = '20'
            }
        }
    }
</script>
  

Спасибо

Я думаю, вы здесь немного запутались. Вам нужно ввести changeAge в качестве поддержки дочернему компоненту от родительского, чтобы он обновлял состояние родительского компонента, и это запускает повторный рендеринг дочернего компонента.

Итак, вашему дочернему объекту нужен prop со следующей подписью:

 changeAge: () => void
  

Затем вы определяете изменение в родительском:

 // parent, NOT child 
methods: {
    ...
    changeAge() {
            this.age = '20'
        }
...
  

}

А затем внедрите его в дочерний:

 <template>
    ...
    <child :changeAge=“changeAge” etc.../>
    ...
</template>
  

Надеюсь, это поможет.