Vue 通过 props 存储的值不是反应式的

Posted 2023-02-23

【中文标题】Vue 通过 props 存储的值不是反应式的

【英文标题】：Vue stored valued through props not being reactive

【发布时间】：2020-12-01 09:42:29

【问题描述】：

所以我使用 [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;
                
            
        
    
);

【参考方案1】：

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