프로펠 변경 시 컴포넌트 업데이트

프로펠 변경 시 컴포넌트 업데이트

소품 변경 시 컴포넌트를 강제로 다시 렌더링하려면 어떻게 해야 합니까?

다음을 포함하는 구성 요소가 있다고 가정합니다.

<test-sub-component :layoutSetting="layoutSetting"></test-sub-component>

데이터 오브젝트는 다음과 같습니다.

 data() {
  return {
    layoutSetting: 'large'
  }
},

그런 다음 버튼을 클릭해서 전달된 소품 설정을 변경하고 컴포넌트가 다시 렌더링됩니다.

<button @click="changeLayout">Change Layout</button>

그리고 다음과 같은 방법이 있다.

changeLayout() {
        this.layoutSetting = 'small';
    },

이렇게 하면 데이터 개체가 변경되었지만 변경된 소품으로 구성 요소를 다시 렌더링하지 않습니까?

컴포넌트에서 camelCased로 정의된 속성을 전달할 때는 템플릿에서 kebab-cased 속성 이름을 사용해야 합니다.

<test-sub-component :layout-setting="layoutSetting"></test-sub-component>

console.clear()

Vue.component("test-sub-component", {
  props: ["layoutSetting"],
  template:`<div>{{layoutSetting}}</div>`
})

new Vue({
  el: "#app",
  data() {
    return {
      layoutSetting: 'large'
    }
  },
  methods: {
    changeLayout() {
      this.layoutSetting = 'small';
    },
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>

<div id="app">
  <test-sub-component :layout-setting="layoutSetting"></test-sub-component>
  <button @click="changeLayout">Change Layout</button>
</div>

언급URL : https://stackoverflow.com/questions/44786384/update-component-when-prop-changes