VUE2js：如何在其道具更改后重新渲染组件？

Question

这里是 Vue 新手。事情很简单：

<template>
 <btn :color="color" @click="toggleColor">{{btnmsg}}</btn>
</template>

<script>
import { Btn } from 'chico'
export default = {
 name: 'AButton',
 componenents: {
  Btn
 },
 data () {
  return {
   btnmsg: 'Legia pany'
   colors: ['blue', 'black', 'green', 'organge', 'teal', 'cyan', 'yellow', 'white'],
   color: 'red'
  }
},
methods: {
 toggleColor () {
  this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))]
 }
}
 </script>

ChicoFamily 的 'Btn' 是这样的

  <template>
   <button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role" ">
    <slot></slot>
   </button>
  </template>

<script>
import classNames from 'classnames';
 export default {
  props: {
   tag: {
    type: String,
    default: "button"
   },
   color: {
    type: String,
    default: "default"
...it takes hellotta props... 
},
data () {
 return {
  className: classNames(
    this.floating ? 'btn-floating' : 'btn',
    this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color,
...classes derived from these props...
   )
  };
 }
};
</script>

是的，这是一个按钮，单击该按钮时应该改变其颜色。单击它确实改变了传递的道具，但实际上并没有重新渲染按钮。我问这个问题，因为我觉得 Vue2 机制中有一些更重要的东西让我无法理解。

为什么传递一个不同的道具不会重新呈现这个可爱的未来按钮？ 如何正确地做到这一点？

最好的，帕科

[edit:] Btn 的颜色来自 Bootstrap 类源自 prop。会不会是它得到了适当的道具，但 className 机制没有跟上？

Answer 1

您的颜色没有反应，因为您将其设置为 data 而不是 computed。

按照您的方式，className 将在创建实例时设置一次。

为了让 className 每次更改 state 中的一个道具时都重新计算，你必须从中制作一个 computed property :

Btn 组件：

export default {
  props: {
    [...]
  },
  computed: {
    className() {
      return classNames(
        this.floating ? 'btn-floating' : 'btn',
        this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' :   this.transparent ? '' : 'btn-' + this.color);
      );
    },
  },
}

Answer 2

在组件上设置 :key 是强制 Vue re-render 组件的最佳方式。如果你要求组件被re-rendered，只需修改key的值，Vue就会re-render它。

VUE2js：如何在其道具更改后重新渲染组件？

VUE2js: How to have component re-render after its props change?

vue.js

vue-component

vuejs2