Question

在这里，父母将name和age道具传递给孩子。子组件发出自定义事件changeAgeFn，该事件将其changeAge方法传递给父组件。

在父级中，（通过）changeAge事件被附加到button[change age]上的click事件。

但是这种方法不起作用。我想知道从父级执行子级事件的标准/推荐方式。

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>

child.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>

谢谢

Answer 1

我认为您在这里有点困惑。您需要从父级注入changeAge作为子级组件的道具，以便它更新父级的状态，并触发子级的重新渲染。

因此，您的孩子需要带有以下签名的道具：

changeAge: () => void

然后在父级中定义changeAge：

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

}

然后将其注入子项：

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

希望有帮助。

VueJS：将子方法传递给父方法不会执行

1 个答案: