Vue: 프로펠러 함수의 기본값

Vue: 프로펠러 함수의 기본값

기능 타입으로 소품 디폴트 기능을 설정할 수 있는 방법이 있습니까?

props: {
    clickFunction: {
        type: 'Function'
        default: ????
    }
}

네:

Vue.component('foo', {
  template: '<div>{{ num }}</div>',
  props: {
    func: {
      type: Function,
      default: () => 1,
    },
  },
  data() {
    return { 
      num: this.func()
    }
  }
})

new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <foo></foo>
</div>

항상 지정한 유형과 일치하는 기본값을 제공하십시오. 훨씬 쉽게 추론할 수 있습니다.여기서 찾고 있는 것은 noop 함수(noop 함수라고도 함)입니다.

props: {
  clickFunction: {
    type: Function
    default: () => {}
  }
}

그 후 를 사용할 수 있습니다.this.clickFunction()방어적으로 먼저 확인하지 않고 코드에 입력한다.이것은 항상 함수입니다.디폴트값과 혼동하지 않도록 주의해 주세요.Object소품, 그것은 빈 객체가 됩니다.

props: {
  someObject: {
    type: Object
    default: () => ({})
  }
}

Vue에서는Object그리고.Array소품에는 컴포넌트의 모든 인스턴스(instance)에 대해 구별되도록 함수에 의해 기본값이 반환되어야 합니다(이는 필요하지 않은 것으로 보입니다).Function하지만 의사들은 이에 대해 확실히 알지 못합니다.)

이 방법은 Vue 2.0에서 동작합니다.

props: {
    clickFunction: {
        type: 'Function'
        default(){
          return () => true
        }
    }
}

매개 변수를 사용한 예:

responseFunc: {
  type: Function, 
  default: (response) => {
    return response.data;
  }
}

나는 이것이 올바른 접근법이 아니라고 생각한다.VUE는 그렇게 동작하지 않습니다.왜 소품으로 기능하기 위해 참조를 전달하려고 합니까?컴포넌트는 부모로부터 수신할 수 있는 독자적인 이벤트를 송신할 수 있습니다.

여기 소품 종류가 있습니다.https://vuejs.org/v2/guide/components-props.html

cutom 이벤트에 대한 자세한 내용은 https://vuejs.org/v2/guide/components-custom-events.html#Event-Names를 참조하십시오.

편집 예, 답변이 정확하지 않고 질문에 답변하지 않습니다.솔직한 답변: 예. 기능 유형을 가진 소품에는 기본 기능을 설정하는 방법이 있습니다(기타 답변 참조).

패턴과 유스케이스는 주제를 벗어났기 때문에 여기서 마치도록 하겠습니다(다만, 제 답변에 대해 누군가가 흥미로운 것을 언급했습니다.

언급URL : https://stackoverflow.com/questions/53659719/vue-default-value-for-prop-function