vue reload 하위 구성 요소

vue reload 하위 구성 요소

vue 버전 2.5.8을 사용하고 있습니다.

하위 구성 요소를 다시 로드하거나 상위 구성 요소를 다시 로드한 다음 하위 구성 요소를 다시 로드합니다.

이거 쓰려고 했는데$forceUpdate()는 동작하지 않습니다.

어떻게 하는지 아세요?

컴포넌트에 : 키를 사용하여 키를 리셋합니다.

https://michaelnthiessen.com/force-re-render/ 를 참조해 주세요.

하위 구성 요소에 키를 추가한 다음 상위 구성 요소의 키를 업데이트합니다.하위 구성 요소가 다시 생성됩니다.

<childComponent :key="childKey"/>

서브가 동적으로 작성되는 경우v-for어레이를 클리어하고 재작성하면 아이들이 모두 재생성됩니다.

기존 컴포넌트가 신호에 응답하도록 하려면 이벤트버스를 소품으로 전달한 후 응답할 이벤트를 내보냅니다.통상적인 방향은 올라가고 있습니다만, 내려가는 것이 적절할 수 있습니다.

new Vue({
  el: '#app',
  data: {
    bus: new Vue()
  },
  components: {
    child: {
      template: '#child-template',
      props: ['bus'],
      data() {
        return {
          value: 0
        };
      },
      methods: {
        increment() {
          this.value += 1;
        },
        reset() {
          this.value = 0;
        }
      },
      created() {
        this.bus.$on('reset', this.reset);
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <child :bus="bus">
  </child>
  <child :bus="bus">
  </child>
  <child :bus="bus">
  </child>
  <button @click="() => bus.$emit('reset')">Reset</button>
</div>

<template id="child-template">
  <div>
  {{value}} <button @click="increment">More!</button>
  </div>
</template>

조건부 렌더링을 담당하는 지시어 v-if를 사용하고 있습니다.HTML 새로고침에만 영향을 줍니다.<template>part. 작성된 섹션()은 새로고침되지 않습니다.프레임워크 로드 후에는 컴포넌트를 새로고침할 수 없는 것으로 알고 있습니다.재렌더할 수 있는 것은<template>.

렌더의 예.

Child.vue 컴포넌트 코드가 있습니다.

<template>
    <div v-if="show">
      Child content to render 
      {{ callDuringReRender() }}
    </div>
</template>

<script>
    export default {
        data() {            
            return {               
                show: true
            }
        }
        ,
        methods: {
            showComponent() {
                this.show = true
            },
            hideComponent() {
                this.show = false
            },
            callDuringReRender() {
                console.log("function recall during rendering")
            }
        }
}
</script>

우리 부모님 안에서.vue 구성 요소 하위 메서드를 호출할 수 있으며 v-if를 사용하여 하위 렌더링을 강제로 다시 수행할 수 있습니다.

<template>
    <div>
      <input type="button" 
       value="ReRender the child" 
       @click="reRenderChildComponent"/>

      <child ref="childComponent"></child>

    </div>
</template>

<script>
    import Child from './Child.vue'

    export default {
       methods: {
            reRenderChildComponent(){
                this.$refs.childComponent.hideComponent();
                this.$refs.childComponent.showComponent()
            }
       },
       components: {
            Child
       }
    }
</script>

콘솔에서 버튼을 클릭하면 컴포넌트가 다시 렌더링되었음을 알리는 "렌더링 중 기능 호출" 메시지가 나타납니다.

이 예는 @sureshvv가 공유한 링크에서 가져온 것입니다.

import Vue from 'vue';
Vue.forceUpdate();

// Using the component instance
export default {
methods: {
  methodThatForcesUpdate() {
    // ...
    this.$forceUpdate();  // Notice we have to use a $ here
    // ...
   }
  }
} 

하위 구성 요소를 새로 고치려면 전달된 속성을 템플릿에 출력하거나 계산된 속성으로 액세스해야 합니다.

<!-- ParentComponent -->
<template>
    <child-component :user="userFromParent"></child-component>
</template>

<!-- ChildComponent -->
<template>
    <!-- 'updated' fires if property 'user' is used in the child template -->
    <p>user: {{ user.name }}
</template>
<script>
export default {
    props: {'user'},
    data() { return {}; }
    computed: {
        // Or use a computed property if only accessing it in the script
        getUser() {
            return this.user;
        }
    }
}
</script>

언급URL : https://stackoverflow.com/questions/47683728/vue-reload-child-component