VueJS 확장 구성 요소: 상위 속성 제거

VueJS 확장 구성 요소: 상위 속성 제거

두 개의 Vue 구성 요소가 있는데 하나는 다른 구성 요소를 확장하십시오.

// CompA.vue

export default {
    props: {
        value1: Object,
    },

    data: function () {
        return {
            value2: 'hello2 from A',
            value3: 'hello3 from A'
        }
    }
}

// CompB.vue

import CompA from './CompA.vue';

export default {
    extends: CompA,

    props: {
        value4: Object
    },

    data: function(){
        return {
            value2: 'hello2 from B'
        }
    }
}

문서에 설명된 대로 CompB의 옵션은 Comp로 병합된다.A의 결과:

{
    props: {
        value1: Object,
        value4: Object
    },

    data: function () {
        return {
            value2: 'hello2 from B',
            value3: 'hello3 from A'
        }
    }
}

하지만 내가 원하는 결과는 재산을 갖는 것이다.value1제거됨:

{
    props: {
        value4: Object
    },

    data: function () {
        return {
            value2: 'hello2 from B',
            value3: 'hello3 from A'
        }
    }
}

사용자 정의 옵션 병합 전략을 사용하여 가능해야 한다고 생각한다.

하지만 내가 돌아온다고 해도null또는undefined재산은 제거되지 않는다.

Vue.config.optionMergeStrategies.data = function(parentVal, childVal) {
    return null;
};

그런 일이 가능할까?만약 그렇다면, 어떻게?

이것이 마침내 나에게 효과가 있었던 나만의 해결책이다: 속성의 수동 삭제beforeCreate().

이것은 버트의 대답과 매우 비슷하다.

// CompB.vue

import CompA from './CompA.vue';

export default {
    extends: CompA,

    props: {
        value4: Object
    },

    data: function(){
        return {
            value2: 'hello2 from B'
        }
    },

    beforeCreate: function(){
        Vue.delete(this.$options.props, 'value1');
    },
}

나는 어떻게 하는지는 잘 모르겠다.Vue.config.optionMergeStrategies효과가 있지만 이것은 테스트 환경에서 효과가 있다.

import CompA from './CompA.vue';
// make a deep clone copy of CompA. Here I'm just using a made up copy
// function but you could use lodash or some other library. Do NOT use
// JSON.parse(JSON.stringify(...)) because you will lose functions. Also
// Object.assign will not work because Object.assign performs a shallow
// copy (meaning if you delete from props, which is a nested object, you
// will still globally delete the property).
import copy from "./utils" 
//copy CompA
let newCompA = copy(CompA)    
// delete the desired props
delete newCompA.props.value1

export default {
    // extend the copy
    extends: newCompA,

    props: {
        value4: Object
    },

    data: function(){
        return {
            value2: 'hello2 from B'
        }
    }
}

기본적으로 구성 요소를 확장하기 전에 원하지 않는 소품을 삭제하십시오.

왜 그것이 필요한지 모르겠어.하지만 다음과 같이 할 수도 있다.

• 와 함께Object.assign:

  extends: Object.assign({}, compA, {
      props: {
          value4: Object
      }
  }),
  

• 스프레드 오퍼레이터 포함 ...compA:

  extends: { 
      ...compA,
      props: {
          value4: Object
      }
  }
  

아래 데모나 이 바이올린 좀 봐.

const compA = {
  name: 'CompA',
  template: `
  	<div>
    <h2>{{$options.name}}</h2>
    props: <br/> 
    <span v-if="$options.name === 'CompA'">1 - {{value1}}<br/></span>
    <span v-if="$options.name === 'CompB'">4 - {{value4}}<br/></span>
    {{value2}}<br/>
    {{value3}}
    </div>
  `,
  props: {
    value1: Object,
  },

  data: function() {
    return {
      value2: 'hello2 from A',
      value3: 'hello3 from A'
    }
  }
}

const compB = {
  name: 'CompB',
  extends: Object.assign({}, compA, {
    props: {
      value4: Object
    }
  }),

  /*
  // with spread operator
  { 
  	...compA,
  	props: {
    	value4: Object
    }
  },*/
  data: function() {
    return {
      value2: 'hello2 from B'
    }
  }
}

console.log('no prop value1', compB)

new Vue({
  el: '#app',
  components: {
    compA,
    compB
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <comp-a :value1="{id: 2}">
  </comp-a>
  <comp-b :value1="{id: 4}" :value4="{id: 9}">
  </comp-b>
</div>

참조URL: https://stackoverflow.com/questions/45680047/vuejs-extend-component-remove-parents-property