vue js 2: 마운트된 기능에서 소품 액세스

vue js 2: 마운트된 기능에서 소품 액세스

자 컴포넌트에 데이터 소품이 있습니다.탑재된 기능의 자성 부품 내 소품에서 특정 값을 얻어 선택 드롭다운 값을 설정해야 합니다.정상적으로 동작하는 vue-multiselect 플러그인을 사용하고 있습니다.여기 암호가 있습니다.

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      


        Vue.nextTick(function () {      
        // I want to access props here but it return 0 length array 
            console.log(vm.$parent.Subscriptions);
        });
    },  
    beforeUpdate() {
        let vm = this;
        console.log(vm.$parent.Subscriptions);
    },
//  updated() {
//      let vm = this;
//      console.log(vm.$parent.Subscriptions);
//  }
};

이제 구독을 받을 수 있는 시간은 업데이트 및 업데이트 함수 이전뿐이지만 값이 변경될 때마다 호출됩니다. 이 값은 필요하지 않습니다.드롭 다운 초기값을 설정하기 위해 처음 변경만 하면 됩니다.

부모 컴포넌트가 서브 컴포넌트가 렌더링되는 시점에서 늘이 되는 변수를 서브 컴포넌트로 전달하는 경우가 자주 있습니다.따라서 마운트된 하위 구성 요소에서 액세스합니다.null 값으로 표시됩니다.그리고 나중에 부모 컴포넌트에서는 전달된 변수(prop)에 비동기 연산의 값이 할당됩니다.가능한 함정을 방지하려면 v-if를 사용하는 것이 좋습니다.

예:

<ChildComponent :data="testData" />

아래 대신 사용할 수 있습니다.

<ChildComponent v-if="testData" :data="testData" />

따라서 testData 사용 가능한 하위 구성요소가 렌더링됩니다.그러나 하위 구성 요소에서 다른 구성 요소를 사용하기 위해 데이터가 더 잘 입력될 때까지 표시할 항목이 몇 개 더 있는 경우.그리고 감시자를 추가하는 것 또한 문제를 해결할 수 있지만, 예쁜 방식으로 해결되지는 않을 것이다.

갱신된 훅에 값이 있기 때문에 아마 그럴 수 있습니다.

왜 '$parent'를 통해 현재의 컴포넌트 소품에 접근하려고 합니까?

다음과 같이 동작합니다.

 module.exports = {
  props: ["Subscriptions"],
  mounted: function () {
      let vm = this;

      Vue.nextTick(function () {
        console.log(vm.Subscriptions);
      });
  },  
  beforeUpdate() {
    console.log(this.Subscriptions);
  },
  updated() {
    console.log(this.Subscriptions);
  }
};

업데이트:

어쨌든 다음 체크가 필요한지는 모르겠지만, nextTick 없이 생성된 기능을 사용해 보세요.

created() {
  alert(this.Subscriptions);
},

@watch를 사용하여 비슷한 문제를 해결했습니다.이게 먹힐 수도 있지 않을까?

module.exports = {
  props: ["Subscriptions"]

  // this mounted is probably not necessary
  mounted: function () {
    getSubscriptions(this.Subscriptions)
  },  

  watch: {
    Subscriptions: [{
      handler: 'getSubscriptions'
    }]
  },

  methods: {
    getSubscriptions(el) {
      console.log(el);
    }
  }
};

소품으로부터 데이터 수신:

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      

        vm.$nextTick(function () {      
           console.log(vm.Subscriptions);
        });
    },  

나는 소품을 전혀 사용하지 않음으로써 비슷한 문제를 해결했다.대신 부모 컴포넌트에서 자식 컴포넌트에 메서드를 실행하여 인수를 전달했습니다.

이를 수행하려면 상위 구성 요소의 템플릿에서 하위 구성 요소 요소에 ref 속성을 설정한 다음 이를 사용합니다.$refs: 임의의 후크 또는 메서드에서 메서드에 액세스합니다.

<template>
<child-component ref="name"/>
</template>

<script>
export default{
mounted(){
this.$refs.name.methodName(data);
}
</script>

이것은 다양한 상황에서 도움이 될 수 있습니다. 즉, 어떤 일이 일어났을 때 데이터를 전달하거나 메서드를 실행하거나 둘 다입니다.또, 그 반대의 경우도 이것을 사용해 실행할 수 있습니다.자녀 컴포넌트의 $parent.

언급URL : https://stackoverflow.com/questions/45273525/vue-js-2-access-props-in-mounted-function