Vue3 Props v-if 同步

Question

我在用vue做道具，v-if不行，我想知道我做的函数有没有写对。我希望道具中的数据同步工作。我犯了什么错误？

vue props 在启动时检查哪些功能？

<my-alert type="warning" appearance="outline" showIcon="false">Hello</my-alert>

myAlert.vue

<template>
<div class="block" :class="[typeClass,appearanceClass]">
    <div class="alert-icon" v-if="myIcon">
      <i>ICON</i>
    </div>
  </div>
</template>
<script>
const types =
    ['primary','accent','warn','basic','info','success','warning','error',
    ];
const appearances =
    ['border','accent','fill','outline','soft'];

import {defineComponent} from "vue";
import {computed} from "vue";

export default {
  props: {
    type: {
      type: String,
      default: 'primary',
      required: true,
      validator: value => {
        return ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error'].includes(value)
      }
    },
    appearance: {
      type: String,
      default: 'border',
      required: true,
      validator: value => {
        return ['border', 'accent', 'fill', 'outline', 'soft'].includes(value)
      }
    },
    showIcon: {
      default: false
    }
  },
  computed: {
    typeClass() {
      return 'alert-type-' + this.type
    },
    appearanceClass() {
      return 'alert-appearance-' + this.appearance
    },
    myIcon() {
      return this.showIcon;
    }
  }
}
</script>

Answer 1

从你的代码中我可以看到，你正在像这样传递道具 shwoIcon showIcon="false"，这是静态传递，最终将假值作为字符串“false”而不是布尔值传递。所以使用这样的道具 :shwoIcon="false" 我的意思是在 showIcon 之前使用冒号使道具动态。 link

并且在您的 my-alert 组件中，showIcon prop 的 declear 类型是更好的做法

showIcon: {
   type: Boolean,
   default: false,
},

另一种方法是，只需更改计算的属性 myIcon() 即可检查字符串道具值，如下所示，

myIcon() {
    return this.showIcon === "true";
}

Vue3 Props v-if 同步

Vue3 Props v-if sync

vuejs3