美文网首页
Vue中的this.$options.data()和this.$

Vue中的this.$options.data()和this.$

作者: PharkiLL | 来源:发表于2020-10-28 14:53 被阅读0次

    项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下:

    export default {
        props: {
            P: Object
        },
        data () {
            return {
                A: {
                    a: this.methodA
                },
                B: this.P
            };
        },
        methods: {
            resetData () { // 更新时调用
                Object.assign(this.$data, this.$options.data()); // 有问题!!!
            },
            methodA () {
                // do sth.
            },
            methodB () { // 通过用户操作调用
                this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined!!!
            }
        }
    }
    

    调用resetData()之后,再调用methodB()时,this.A.a和this.B是undefined。

    解决
    resetData里这样写:

    resetData () { // 更新时调用
        Object.assign(this.$data, this.$options.data.call(this));
    }
    

    原因
    和Vue实例的初始化相关。(源码version2.6.10)

    1、new Vue的时候传了一个对象,把该对象记为options,Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.options,vm.options.data()中的this指向vm.options,而methodA和B并没有直接挂在vm.options下,所以this.methodA和this.B为undefined。

    总结
    data()中若使用了this来访问props或methods,在重置data时,注意this.options.data()的this指向,最好使用this.$options.data.call(this)。

    相关文章

      网友评论

          本文标题:Vue中的this.$options.data()和this.$

          本文链接:https://www.haomeiwen.com/subject/liaqvktx.html