Vue子组件中 data没法从props中动态更新。

Question

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

Answer 1

如果子组件只作显示，直接绑定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;
    }
})

Answer 2

在子组件中通过工厂函数设置 data

return {
  template: this.temp
}

结果只是得到了一个快照

props 传递过来之后，可以作为只读数据和 data 一样使用，实现响应式，响应数据的变化

Answer 3

我觉得，单纯为了实现你的需求，https://cn.vuejs.org/v2/api/#... 可行

<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 {
                }
            },
              computed: {
                // 仅读取，值只须为函数
                template: function () {
                  return this.temp
                }
              }

        }
    },
    mounted(){
        this.temp = 2;
    }
})

Answer 4

mounted是组件加载完成之后执行 也就是说组件的参数现在是父组件的temp=1，要想子组件的值改变在父组件加一个beforeCreate钩子，里面声明temp=2就能传过去值 但是前提是父组件不需要再在data里声明temp 因为beforeCreate里面已经声明了

Answer 5

44234234234234