Vue按钮更新父组件数据后无法传递给子组件问题求助

你的问题出在子组件的passedData初始化逻辑上——组件的data只会在初始化阶段赋值一次，后续父组件传递的allInputs更新时，子组件的passedData不会自动跟着变化。

下面给你两种可行的修复方案：

方案一：直接使用Props（最简单） #

既然allInputs是父组件传递的props，直接在子组件模板里使用它即可，不需要额外存到data里：

修改Child.vue：

<template>
    <div class="all-inputs">
        <p>{{ allInputs }}</p>
    </div>
</template>

<script>
export default {
    props: ["allInputs"]
}
</script>

方案二：用Watch监听Props变化（需要中间变量时使用） #

如果你的业务逻辑必须把props存到子组件的data里，就添加一个watch监听器，当allInputs变化时自动更新passedData：

修改Child.vue：

<template>
    <div class="all-inputs">
        <p>{{ passedData }}</p>
    </div>
</template>

<script>
export default {
    props: ["allInputs"],
    data (){
        return{
            passedData: this.allInputs
        }
    },
    watch: {
        allInputs(newVal) {
            this.passedData = newVal;
        }
    }
}
</script>

额外小优化 #

父组件里的allInputs初始值设为空字符串，后续又赋值为对象，类型不一致容易引发潜在问题，建议初始就设为空对象：

data(){
    return{
        input1: '',
        input2: [],
        input3: '',
        allInputs: {} // 改为空对象，和后续赋值类型保持一致
    }
}

内容的提问来源于stack exchange，提问作者Yolo_chicken