programing

vue.js 응용 프로그램에서 "this" 키워드를 제외할 수 있습니까?

itsource 2022. 9. 28. 23:30
반응형

vue.js 응용 프로그램에서 "this" 키워드를 제외할 수 있습니까?

사실 나는 따라가고 있다.Douglas Crockford를 누릅니다.

이거 쓰면 경고해줘요.

[jslint] 의외의 '이거'(예상치 않은_a)

이 오류에 대한 해결책을 찾을 수 없습니다. 추가라고 말하지 마십시오.thisjslist.true로 표시하고 true로 표시합니다.

이것을 사용하지 않는 방법이 있습니까?

추가된 코드 편집

// 일부 vue 구성 요소 여기에 있음

   <script>
    export default {
      name: "RefereshPage",
      data() {
        return {
          progressValue: 0
        }
      },
      methods:{
        getRefreshQueue(loader){
          console.log(this.progressValue); // ERROR come here [jslint] Unexpected 'this'. (unexpected_a) 
      }
    }
   }
    </script>

이 jsfiddle을 보세요.어떻게 이걸 안 쓸 수가 있어요?

https://jsfiddle.net/himmsharma99/ctj4sm7f/5/

제가 이미 댓글에 언급했듯이:

사용.this는 컴포넌트 내에서 vue.display가 동작하는 구조에 필수적인 부분입니다.프록시 처리 및 의존관계 추적 방법에 대한 자세한 내용은 https://vuejs.org/v2/api/ #Options-Data 를 참조하십시오.

다른 사람들이 말했듯이, 린터를 비활성화하거나 ESLint로 전환하는 것이 좋습니다.하지만 회피책을 고집할 경우 믹스인과$mountvue 인스턴스에서 사용하지 않도록 하는 방법this총체적으로

    let vm;

    const weaselMixin = {
        methods: {
            getdata() {
                console.log(vm.users.foo.name);
            }
        },
        mounted: function () {
            vm.getdata();
        }
    };

    vm = new Vue({
        mixins: [weaselMixin],
        data: {
            users: {
                foo: {
                    name: "aa"
                }
            }
        }
    });

    vm.$mount('#app');

수정된 JSFiddle 참조

보시다시피, 이것은 매우 단순한 컴포넌트여야 하는 것을 복잡하게 만들 뿐입니다.그것은 단지 당신의 린터를 만족시키기 위해 vue의 작동 방식을 어겨서는 안 된다는 것을 보여준다.

기사를 읽어보시길 권합니다.특히 중요한 것은 이 부분입니다.

Vue.js는 이 컨텍스트에서 사용할 수 있도록 데이터와 메서드를 프록시합니다.그래서 글을 써서this.firstName, 에 액세스 할 수 있습니다.firstName데이터 오브젝트 내의 속성.이것은 필수입니다.

당신이 게시한 코드에서, 당신이 빠진 것 처럼 보입니다}getRefreshQue 정의 후.당신의 linter가 설명하는 오류는 아니지만 구문 오류로 인해 혼란스러웠을 수도 있습니다.

새로운 Composition API를 사용하여 가능합니다.Vue 3에는 기본 지원이 제공되지만 패키지를 사용하여 Vue 2를 지원할 수 있습니다.

다음을 포함하지 않는 컴포넌트의 경우this(vuejs.org에서):

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

언급URL : https://stackoverflow.com/questions/52097129/can-be-exclude-this-keyword-in-vue-js-application

반응형