小编Osc*_*fer的帖子

我试图理解为什么更改用于提供初始值的道具不会导致数据变量发生更改。

在下面的示例中，更改initialName父组件中传递的值也会导致initialName子组件中的值发生更改。但是，name保留其最初初始化的值。我相信，更改道具会重新渲染组件，这似乎是错误的。

ChildComponent.vue

<template>
    <div>
        {{initialName}}
        {{name}}
    </div>
</template>
<script>
export default {
    props: {
        initialName: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            name: this.initialName,
        };
    },
</script>

ParentComponent.vue

<template>
    <ChildComponent :initialName="AnExampleName"/>
</template>
<script>
import ChildComponent from ChildComponent.vue
export default {
    components: {
        ChildComponent
    }
</script>

我已经能够通过观看 prop 和 update 来解决这个问题name，但这感觉不是最好的方法。

为什么改变 prop 不会改变数据？有没有更好的方法将初始值传递给子组件？

我正在使用Apexcharts 树状图并想要应用不同的颜色。

如果 type 数据是“a”类型，我想要一种颜色，如果数据是“b”类型，我想要另一种颜色。

我的数据：

    const TreeData = [
          {
            data: [
              {
                x: 'Product 1',
                y: 218,
                type:'a'
              },
              {
                x: 'Product 2',
                y: 149,
                type:'b'
              }]
    

我尝试过这样的事情：

    colors: [function({ value, seriesIndex, w }) {
        if (value < 55) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }, function({ value, seriesIndex, w }) {
        if (value < 111) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }]
    

但我无法在上述函数中获取类型值。

如何使用不同的颜色？

我有一个警报组件，它有一个 flag isVisible，当创建该组件时，该标志变为 true ，并且在创建的 HOOK 中，我有一个在setTimeout组件接收到 DESTROY 布尔属性时启动的警报组件：

props: {
  destroy: {
    type: Boolean,
    default: false,
  },
}

data() {
  return {
    isVisible: false,
  }
}

created() {
  this.isVisible = true
  if (this.destroy) {
    setTimeout(() => {
      this.isVisible = false
    }, 2500)
  },
}

我正在使用 VUE UTILS / JEST 来测试组件是否在setTimeout结束后消失，我尝试过：

test('Component dissapears after 2.5 seconds when it receives DESTROY prop', async () => {
  const component = wrapper.get('[data-test-id="info-alert-wrapper"]')
  await wrapper.setProps({
    destroy: true,
  })

  await …