Question

当道具发生变化时，如何强制组件重新渲染？

假设我有一个包含的组件：

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

我的数据对象是这样的：

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

然后点击一个按钮我想改变传递的道具的设置，组件应该重新渲染，比如

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

和

这样的方法

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

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

Answer 1

当你传递一个在组件中定义为camelCased的属性时，你需要在模板中使用kebab-cased属性名称。

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

＆＃13;

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';
    },
  }
})

＆＃13;

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

＆＃13;

道具改变时更新组件

1 个答案: