vue組件之this指向問題

【問題描述】

返回頂部組件里，用到數據操作。通過方法里改動this數據，但發現直接使用失效

        mounted() {
            window.onscroll=function(){
                if(document.documentElement.scrollTop>100) {
                    this.isActive=true;
                }else{
                    this.isActive=false;
                }
            }
        }

    此時發現無效？？？

    檢查后發現this指向window，而非vue實例，所以無法操作數據。

 

【解決方案】

/*  問題：在內部直接操作this失效？ */
/*  解析：因為在函數內部使用this時，this會指向window，而非vue實例。所以除了vue組件自身方法外，在別的地方調用this時，
    首先需要在最外部，設置一個變量，將其綁定上vue實例。*/

        mounted() {
            /*  問題：在內部直接操作this失效？ */
            /*  解析：因為在函數內部使用this時，this會指向window，而非vue實例。所以除了vue組件自身方法外，在別的地方調用this時，
                首先需要在最外部，設置一個變量，將其綁定上vue實例。*/
            var vm=this;
            window.onscroll=function(){
                if(document.documentElement.scrollTop>100) {
                    vm.isActive=true;
                }else{
                    vm.isActive=false;
                }
            }
        }

 

 

 

 

.