vue.js - 当 prop 改变时更新组件

Question

如何在 prop 更改时强制组件重新渲染？

假设我有一个组件包含:

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

我的数据对象是这样的:

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

然后点击一个按钮我想改变传递的 Prop 的设置，组件应该重新渲染，就像

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

还有一个像

这样的方法

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

这改变了数据对象，但它没有使用改变的 prop 重新渲染组件？

Answer 1

当您在组件中传递定义为驼峰式命名的属性时，您需要在模板中使用 kebab 式属性名称。

<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>