Vue因道具不反应而储藏的价值

问题描述

因此，我使用[props]传递值并将其存储在子组件的数据中。但是，当从父级传递[props]值更改时，它不会在子组件的数据中更新。是否有针对此的解决方法？？

Here is the link to w3 test（我试图在此处尽可能地阐明问题）

<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;
                }
            }
        }
    }
});

解决方法

Props have one way data flow,that's why it doesn't react when you update it from the parent component.在数据上定义prop的克隆以使其具有反应性，然后可以在子组件中更改该值。