명시적으로 선언되지 않은 Vue 소품

명시적으로 선언되지 않은 Vue 소품

비슷한 시도를 하고 있다.redux-form하지만 Vue & Vuex에서.기본적으로, 그것은 양식 처리를 더 능률적으로 만들고 여러분이 덜 글씨를 쓰도록 만들어야 한다.

내가 가지고 있는 문제는 HOC의 구성요소에 소품을 동적으로 전달하려고 할 때 입니다.어떻게 해야 할지 잘 모르겠어.리액션에서 당신은 간단히 다음과 같은 일을 할 것이다.

<VfField unknownPropA="abc" unknownPropB="123" name="test" />

그리고 VfField.js에서는:

export default ({name, ...props}) => <div name={name}><InputComponent {...props} /></div>

이러면 결과가 나올 것이다.props다음을 포함하는 사물인 것unknownPropA그리고unknownPropB.

그러나 Vue에는 다음과 같은 몇 가지 코드가 있다.

<vf-form @submit="submit" @validate="validate">
  <vf-field type="text" name="username" unknownPropA="abc"></vf-field>
  <vf-field type="password" name="password" unknownPropB="123"></vf-field>
  <button type="submit">Submit</button>
</vf-form>

그러니 어떻게 그럴 수 있겠는가.vf-field이 "유아" 소품에 접근해서 자식에게 물려주는 거야? $vm.$props단지 내가 명시적으로 선언한 소품을 산출할 뿐, 다른 것은 완전히 무시한다.unknownPropA그리고unknownPropB. 많은 경우에 정말 유용하기 때문에 "동적으로" 패스를 할 수 있는 힘이 바로 내가 찾고 있는 것이다.

참고:

지금까지 나는 Vue가 간단한 일에는 훌륭하다고 생각하며, 예를 들어, "Raction"에 있는 것보다 무언가를 시작하고 실행하는 것이 훨씬 더 빠를 것이라고 생각한다.하지만 어떤 것이 "보통이 아닌" 것이 되자마자, 지금까지는 리액션이 더 도움이 된다는 것을 알게 된다.이것은 물론 부에에 대한 나의 지식 부족 때문일 것이다.

이것은 까다롭고 확실히 기본적으로 지원되지는 않지만, 당신은 전달된 속성을 얻을 수 있다.vnode사용.this.$vnode.elm.attributes그리고 나서 그것들을 반복해서 소품 물체에 그것들을 추가하라. (앞으로도 선언할 필요가 있다.)당신이 직접 처리할 것이기 때문에, 나는 이것을 에 넣을 것이다.mixin따라서 재사용할 수 있지만 다음 작업을 수행하십시오.

  methods: {
    getProps() {
      let props = this.$vnode.elm.attributes;
      Object.keys(props).forEach(key => {
        this.$set(this.props, props[key].name, props[key].nodeValue)
      });
    }
  },
  data(){
    return{
      props: {}
    }
  }

이렇게 하면 구성 요소에서 알 수 없는 소품을 선언한 것처럼 전달할 수 있다.

나는 당신에게 그 과정을 보여주기 위해 JSFiddle을 만들었다: https://jsfiddle.net/2c23Lb5t/

이렇게 하는 겁니다.mixin: https://jsfiddle.net/fej7wu5f/

당신은 그것을 사용할 수 있다.$attrs문서화라는 소품으로 인식되지 않는 것을 얻기 위해서입니다.그 반대도 존재한다는 점에 유의하십시오.$props.

대신, 소품으로 어떤 물체를 아이에게 전달할 수 있고, 그것은 당신이 원하는 모든 속성을 가질 수 있다.

다음과 같을 수 있다.

<VfField :unknownPropObj=yourObj name="test" />

어디에yourObj다음이 될 수 있다:{"A": "abc", "B": "123"}

프로펠러에만 대해 정의할 수 있다.unknownPropObj아이 안에 있는 모든 재산에 액세스할 수 있으며

v-bind="$attors"를 사용하여 이를 달성할 수 있음

<VfField v-bind="$attrs" name="test" />

속성을 수신할 요소를 수동으로 결정하려는 경우(기본적으로 루트 요소가 해당 속성을 상속함) 하위 구성 요소에 상속 옵션인 false를 전달할 수 있다.

<script>
  export default {
    inheritAttrs: false,
  };
</script>

참조: https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance

참조URL: https://stackoverflow.com/questions/42581403/vue-props-that-arent-explicitly-declared