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

waynebruce
  • 282

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

clipboard.png

回复
阅读 19.1k
5 个回答

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

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

return {
  template: this.temp
}

结果只是得到了一个快照

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

我觉得,单纯为了实现你的需求,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;
    }
})
kk32147
  • 1
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏