vue.js - Vue子组件中 data没法从props中动态更新。

问题描述

问 题

当props中的数据更新时，组件data里的没更新呢。能不能props里的数据变化，data的数据也变化。

<div id="app">
    <child :temp="temp"></child>
</div>
var vm = new Vue({
    el: "#app",
    data: {
        temp: 1
    },
    components: {
        "child": {
            template: '<div>{{template}}</div>',
            props: ['temp'],
            data(){
                return {
                    template: this.temp
                }
            }
        }
    },
    mounted(){
        this.temp = 2;
    }
})

解决方案

如果子组件只作显示，直接绑定prop的值就可以了。如果还有其他考虑，可以用watch

<div id="app">
    <child :temp="temp"></child>
</div>
var vm = new Vue({
    el: "#app",
    data: {
        temp: 1
    },
    components: {
        "child": {
            template: '<div>{{template}}</div>',
            props: ['temp'],
            data(){
                return {
                    template: ''
                }
            },
            watch: {
                temp() {
                    this.template = this.temp
                }
            }，
            created(){
                this.template = this.temp
            }
        }
    },
    mounted(){
        this.temp = 2;
    }
})

这篇关于vue.js - Vue子组件中 data没法从props中动态更新。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！