Vue.js 通过非反应性道具存储的Vue值

所以我使用[props]传递值并将其存储在子组件的数据中。但是，当从父组件传递[props]值更改时，它不会更新子组件的数据。有解决这个问题的办法吗

（我尽量在这里澄清问题）

单击以查看父值



{{txt}






正如您所见，这种方法不是被动的
新Vue({
el:“家长”，
数据：{
传递_数据：“值”，
txt:“单击以更改值”
},
方法：{
当前_值（）{
警报（此为传递_数据）；
},
改变_值（e）{
this.passing_data='New Vaule！！'；
this.txt='现在再次单击上面的按钮以查看新值'；
e、 target.style.backgroundColor='red'；
e、 target.style.color='白色'；
}
},
组成部分：{
“子公司”：{
模板：`
单击此处查看子（存储）值
`,
道具：['test-prop']，
数据（）{
返回{
存储的_数据：this.testProp
}
},
方法：{
测试（）{
警报（这是存储的数据）；
}
},
观察：{
存储的数据（）{
this.storaged_data=this.testProp；
}
}
}
}
});
定义道具at数据的克隆以使其反应，然后您可以更改子组件中的值

<div id='app'>
    <div id='parent'>
        <button @click='current_value()'>Click to see parent value</button>
        <br><br>
        <button @click='change_value($event)'>{{ txt }}</button>
        <br><br>
        <child-comp :test-prop='passing_data'></child-comp>
    </div>
    <br><br>
    <center><code>As you can see, this methods is <b>NOT</b> reactive!</code></center>
</div>
<script>

new Vue({
    el: "#parent",
    data: {
        passing_data: 'Value',
        txt: 'Click to change value'
    },
    methods: {
        current_value(){
            alert(this.passing_data);   
        },
        change_value(e){
            this.passing_data = 'New Vaule!!';
            this.txt = 'Now click above button again to see new value';
            e.target.style.backgroundColor = 'red';
            e.target.style.color = 'white';
        }
    },
    components: {
        "child-comp": {
            template: `
                <button @click='test()'>Click here to see child (stored) value</button>
            `,
            props: ['test-prop'],
            data(){
                return {
                    stored_data: this.testProp
                }
            },
            methods: {
                test(){
                    alert(this.stored_data);
                }
            },
            watch: {
                stored_data(){
                    this.stored_data = this.testProp;
                }
            }
        }
    }
});